fix: node replacement fails after execution and modal sync

- Detect missing nodes by unregistered type instead of has_errors flag,
  which gets cleared by clearAllNodeErrorFlags during execution
- Sync modal replace action with executionErrorStore so Errors Tab
  updates immediately when nodes are replaced from the dialog

.github/workflows/ci-perf-report.yaml

@@ -0,0 +1,110 @@
+name: 'CI: Performance Report'
+
+on:
+  push:
+    branches: [main, core/*]
+    paths-ignore: ['**/*.md']
+  pull_request:
+    branches-ignore: [wip/*, draft/*, temp/*]
+    paths-ignore: ['**/*.md']
+
+concurrency:
+  group: perf-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  perf-tests:
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    container:
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+    permissions:
+      contents: read
+      packages: read
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+        with:
+          include_build_step: true
+
+      - name: Start ComfyUI server
+        uses: ./.github/actions/start-comfyui-server
+
+      - name: Run performance tests
+        id: perf
+        continue-on-error: true
+        run: pnpm exec playwright test --project=performance --workers=1
+
+      - name: Upload perf metrics
+        if: always()
+        uses: actions/upload-artifact@v6
+        with:
+          name: perf-metrics
+          path: test-results/perf-metrics.json
+          retention-days: 30
+          if-no-files-found: warn
+
+  report:
+    needs: perf-tests
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+
+      - name: Download PR perf metrics
+        continue-on-error: true
+        uses: actions/download-artifact@v7
+        with:
+          name: perf-metrics
+          path: test-results/
+
+      - name: Download baseline perf metrics
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          branch: ${{ github.event.pull_request.base.ref }}
+          workflow: ci-perf-report.yaml
+          event: push
+          name: perf-metrics
+          path: temp/perf-baseline/
+          if_no_artifact_found: warn
+
+      - name: Generate perf report
+        run: npx --yes tsx scripts/perf-report.ts > perf-report.md
+
+      - name: Read perf report
+        id: perf-report
+        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
+        with:
+          path: ./perf-report.md
+
+      - name: Create or update PR comment
+        uses: actions-cool/maintain-one-comment@4b2dbf086015f892dcb5e8c1106f5fccd6c1476b # v3.2.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ github.event.pull_request.number }}
+          body: |
+            ${{ steps.perf-report.outputs.content }}
+            <!-- COMFYUI_FRONTEND_PERF -->
+          body-include: '<!-- COMFYUI_FRONTEND_PERF -->'

.github/workflows/release-draft-create.yaml

@@ -53,7 +53,13 @@ jobs:
           IS_NIGHTLY: ${{  case(github.ref == 'refs/heads/main', 'true', 'false') }}
         run: |
           pnpm install --frozen-lockfile
-          pnpm build
+
+          # Desktop-specific release artifact with desktop distribution flags.
+          DISTRIBUTION=desktop pnpm build
+          pnpm zipdist ./dist ./dist-desktop.zip
+
+          # Default release artifact for core/PyPI.
+          NX_SKIP_NX_CACHE=true pnpm build
           pnpm zipdist
       - name: Upload dist artifact
         uses: actions/upload-artifact@v6
@@ -62,6 +68,7 @@ jobs:
           path: |
             dist/
             dist.zip
+            dist-desktop.zip
 
   draft_release:
     needs: build
@@ -79,6 +86,7 @@ jobs:
         with:
           files: |
             dist.zip
+            dist-desktop.zip
           tag_name: v${{ needs.build.outputs.version }}
           target_commitish: ${{ github.event.pull_request.base.ref }}
           make_latest: >-

.stylelintrc.json

@@ -40,12 +40,12 @@
     "block-no-empty": true,
     "no-descending-specificity": null,
     "no-duplicate-at-import-rules": true,
+    "at-rule-disallowed-list": ["apply"],
     "at-rule-no-unknown": [
       true,
       {
         "ignoreAtRules": [
           "tailwind",
-          "apply",
           "layer",
           "config",
           "theme",

apps/desktop-ui/package.json

@@ -61,8 +61,7 @@
           "^build"
         ],
         "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "vite build --config vite.config.mts"
+          "command": "vite build --config apps/desktop-ui/vite.config.mts"
         },
         "outputs": [
           "{projectRoot}/dist"

apps/desktop-ui/src/assets/css/style.css

@@ -4,3 +4,39 @@
   position: absolute;
   inset: 0;
 }
+
+.p-button-secondary {
+  border: none;
+  background-color: var(--color-neutral-600);
+  color: var(--color-white);
+}
+
+.p-button-secondary:hover {
+  background-color: var(--color-neutral-550);
+}
+
+.p-button-secondary:active {
+  background-color: var(--color-neutral-500);
+}
+
+.p-button-danger {
+  background-color: var(--color-coral-red-600);
+}
+
+.p-button-danger:hover {
+  background-color: var(--color-coral-red-500);
+}
+
+.p-button-danger:active {
+  background-color: var(--color-coral-red-400);
+}
+
+.task-div .p-card {
+  transition: opacity var(--default-transition-duration);
+  --p-card-background: var(--p-button-secondary-background);
+  opacity: 0.9;
+}
+
+.task-div .p-card:hover {
+  opacity: 1;
+}

apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -101,13 +101,15 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@reference '../../../../assets/css/style.css';
-
+/* xterm renders its internal DOM outside Vue templates, so :deep selectors are
+ * required to style those generated nodes.
+ */
 :deep(.p-terminal) .xterm {
-  @apply overflow-hidden;
+  overflow: hidden;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  @apply bg-neutral-900 overflow-hidden;
+  overflow: hidden;
+  background-color: var(--color-neutral-900);
 }
 </style>

apps/desktop-ui/src/components/common/LanguageSelector.vue

@@ -187,13 +187,17 @@ async function onLocaleChange(event: SelectChangeEvent) {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 :deep(.p-dropdown-panel .p-dropdown-item) {
-  @apply transition-colors;
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--default-transition-duration);
 }
 
 :deep(.p-dropdown) {
-  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/60 focus-visible:ring-offset-2;
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px var(--color-neutral-900),
+      0 0 0 4px color-mix(in srgb, var(--color-brand-yellow) 60%, transparent);
+  }
 }
 </style>

apps/desktop-ui/src/components/install/InstallLocationPicker.vue

@@ -269,26 +269,43 @@ const onFocus = async () => {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 :deep(.location-picker-accordion) {
-  @apply px-12;
+  padding-inline: calc(var(--spacing) * 12);
 
   .p-accordionpanel {
-    @apply border-0 bg-transparent;
+    border: 0;
+    background-color: transparent;
   }
 
   .p-accordionheader {
-    @apply bg-neutral-800/50 border-0 rounded-xl mt-2 hover:bg-neutral-700/50;
+    margin-top: calc(var(--spacing) * 2);
+    border: 0;
+    border-radius: var(--radius-xl);
+    background-color: color-mix(
+      in srgb,
+      var(--color-neutral-800) 50%,
+      transparent
+    );
     transition:
       background-color 0.2s ease,
       border-radius 0.5s ease;
+
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--color-neutral-700) 50%,
+        transparent
+      );
+    }
   }
 
   /* When panel is expanded, adjust header border radius */
   .p-accordionpanel-active {
     .p-accordionheader {
-      @apply rounded-t-xl rounded-b-none;
+      border-top-left-radius: var(--radius-xl);
+      border-top-right-radius: var(--radius-xl);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
     }
 
     .p-accordionheader-toggle-icon {
@@ -299,11 +316,24 @@ const onFocus = async () => {
   }
 
   .p-accordioncontent {
-    @apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
+    border: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: var(--radius-xl);
+    border-bottom-left-radius: var(--radius-xl);
+    background-color: color-mix(
+      in srgb,
+      var(--color-neutral-800) 50%,
+      transparent
+    );
   }
 
   .p-accordioncontent-content {
-    @apply bg-transparent pt-3 pr-5 pb-5 pl-5;
+    background-color: transparent;
+    padding-top: calc(var(--spacing) * 3);
+    padding-right: calc(var(--spacing) * 5);
+    padding-bottom: calc(var(--spacing) * 5);
+    padding-left: calc(var(--spacing) * 5);
   }
 
   /* Override default chevron icons to use up/down */

apps/desktop-ui/src/components/maintenance/TaskCard.vue

@@ -1,11 +1,20 @@
 <template>
   <div
-    class="task-div relative grid min-h-52 max-w-48"
-    :class="{ 'opacity-75': isLoading }"
+    :class="
+      cn(
+        'task-div group/task-card relative grid min-h-52 max-w-48',
+        isLoading && 'opacity-75'
+      )
+    "
   >
     <Card
-      class="relative h-full max-w-48 overflow-hidden"
-      :class="{ 'opacity-65': runner.state !== 'error' }"
+      :class="
+        cn(
+          'relative h-full max-w-48 overflow-hidden',
+          runner.state !== 'error' && 'opacity-65'
+        )
+      "
+      :pt="cardPt"
       v-bind="(({ onClick, ...rest }) => rest)($attrs)"
     >
       <template #header>
@@ -43,7 +52,7 @@
 
     <i
       v-if="!isLoading && runner.state === 'OK'"
-      class="task-card-ok pi pi-check"
+      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 col-span-full row-span-full z-10 text-[4rem] text-green-500 opacity-100 transition-opacity group-hover/task-card:opacity-20 [text-shadow:0.25rem_0_0.5rem_black]"
     />
   </div>
 </template>
@@ -55,6 +64,7 @@ import { computed } from 'vue'
 
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
+import { cn } from '@/utils/tailwindUtil'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'
 
 const taskStore = useMaintenanceTaskStore()
@@ -83,51 +93,9 @@ const reactiveExecuting = computed(() => !!runner.value.executing)
 
 const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
 const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
+
+const cardPt = {
+  header: { class: 'z-0' },
+  body: { class: 'z-[1] grow justify-between' }
+}
 </script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-.task-card-ok {
-  @apply text-green-500 absolute -right-4 -bottom-4 opacity-100 row-span-full col-span-full transition-opacity;
-
-  font-size: 4rem;
-  text-shadow: 0.25rem 0 0.5rem black;
-  z-index: 10;
-}
-
-.p-card {
-  @apply transition-opacity;
-
-  --p-card-background: var(--p-button-secondary-background);
-  opacity: 0.9;
-
-  &.opacity-65 {
-    opacity: 0.4;
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-:deep(.p-card-header) {
-  z-index: 0;
-}
-
-:deep(.p-card-body) {
-  z-index: 1;
-  flex-grow: 1;
-  justify-content: space-between;
-}
-
-.task-div {
-  > i {
-    pointer-events: none;
-  }
-
-  &:hover > i {
-    opacity: 0.2;
-  }
-}
-</style>

apps/desktop-ui/src/views/DesktopDialogView.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
     <h1 class="font-inter font-semibold text-xl m-0 italic">
-      {{ t(`desktopDialogs.${id}.title`, title) }}
+      {{ $t(`desktopDialogs.${id}.title`, title) }}
     </h1>
     <p class="whitespace-pre-wrap">
-      {{ t(`desktopDialogs.${id}.message`, message) }}
+      {{ $t(`desktopDialogs.${id}.message`, message) }}
     </p>
     <div class="flex w-full gap-2">
       <Button
@@ -12,7 +12,7 @@
         :key="button.label"
         class="rounded-lg first:mr-auto"
         :label="
-          t(
+          $t(
             `desktopDialogs.${id}.buttons.${normalizeI18nKey(button.label)}`,
             button.label
           )
@@ -31,7 +31,6 @@ import { useRoute } from 'vue-router'
 
 import { getDialog } from '@/constants/desktopDialogs'
 import type { DialogAction } from '@/constants/desktopDialogs'
-import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
 const route = useRoute()
@@ -41,31 +40,3 @@ const handleButtonClick = async (button: DialogAction) => {
   await electronAPI().Dialog.clickButton(button.returnValue)
 }
 </script>
-
-<style scoped>
-@reference '../assets/css/style.css';
-
-.p-button-secondary {
-  @apply text-white border-none bg-neutral-600;
-}
-
-.p-button-secondary:hover {
-  @apply bg-neutral-550;
-}
-
-.p-button-secondary:active {
-  @apply bg-neutral-500;
-}
-
-.p-button-danger {
-  @apply bg-coral-red-600;
-}
-
-.p-button-danger:hover {
-  @apply bg-coral-red-500;
-}
-
-.p-button-danger:active {
-  @apply bg-coral-red-400;
-}
-</style>

apps/desktop-ui/src/views/DesktopUpdateView.vue

@@ -6,11 +6,11 @@
       <div class="relative m-8 text-center">
         <!-- Header -->
         <h1 class="download-bg pi-download text-4xl font-bold">
-          {{ t('desktopUpdate.title') }}
+          {{ $t('desktopUpdate.title') }}
         </h1>
 
         <div class="m-8">
-          <span>{{ t('desktopUpdate.description') }}</span>
+          <span>{{ $t('desktopUpdate.description') }}</span>
         </div>
 
         <ProgressSpinner class="m-8 w-48 h-48" />
@@ -19,7 +19,7 @@
         <Button
           style="transform: translateX(-50%)"
           class="fixed bottom-0 left-1/2 my-8"
-          :label="t('maintenance.consoleLogs')"
+          :label="$t('maintenance.consoleLogs')"
           icon="pi pi-desktop"
           icon-pos="left"
           severity="secondary"
@@ -28,8 +28,8 @@
 
         <TerminalOutputDrawer
           v-model="terminalVisible"
-          :header="t('g.terminal')"
-          :default-message="t('desktopUpdate.terminalDefaultMessage')"
+          :header="$t('g.terminal')"
+          :default-message="$t('desktopUpdate.terminalDefaultMessage')"
         />
       </div>
     </div>
@@ -44,7 +44,6 @@ import Toast from 'primevue/toast'
 import { onUnmounted, ref } from 'vue'
 
 import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
-import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
 import BaseViewTemplate from './templates/BaseViewTemplate.vue'
@@ -61,10 +60,10 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 .download-bg::before {
-  @apply m-0 absolute text-muted;
+  position: absolute;
+  margin: 0;
+  color: var(--muted-foreground);
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: 2rem;

apps/desktop-ui/src/views/InstallView.vue

@@ -183,33 +183,37 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 :deep(.p-steppanel) {
-  @apply mt-8 flex justify-center bg-transparent;
+  margin-top: calc(var(--spacing) * 8);
+  display: flex;
+  justify-content: center;
+  background-color: transparent;
 }
 
 /* Remove default padding/margin from StepPanels to make scrollbar flush */
 :deep(.p-steppanels) {
-  @apply p-0 m-0;
+  margin: 0;
+  padding: 0;
 }
 
 /* Ensure StepPanel content container has no top/bottom padding */
 :deep(.p-steppanel-content) {
-  @apply p-0;
+  padding: 0;
 }
 
 /* Custom overlay scrollbar for WebKit browsers (Electron, Chrome) */
 :deep(.p-steppanels::-webkit-scrollbar) {
-  @apply w-4;
+  width: calc(var(--spacing) * 4);
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-track) {
-  @apply bg-transparent;
+  background-color: transparent;
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-thumb) {
-  @apply bg-white/20 rounded-lg border-[4px] border-transparent;
+  border: 4px solid transparent;
+  border-radius: var(--radius-lg);
+  background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
   background-clip: content-box;
 }
 </style>

apps/desktop-ui/src/views/MaintenanceView.vue

@@ -114,12 +114,12 @@ import Tag from 'primevue/tag'
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import RefreshButton from '@/components/common/RefreshButton.vue'
 import StatusTag from '@/components/maintenance/StatusTag.vue'
 import TaskListPanel from '@/components/maintenance/TaskListPanel.vue'
 import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
-import { t } from '@/i18n'
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceFilter } from '@/types/desktop/maintenanceTypes'
 import { electronAPI } from '@/utils/envUtil'
@@ -129,6 +129,7 @@ import BaseViewTemplate from './templates/BaseViewTemplate.vue'
 
 const electron = electronAPI()
 const toast = useToast()
+const { t } = useI18n()
 const taskStore = useMaintenanceTaskStore()
 const { clearResolved, processUpdate, refreshDesktopTasks } = taskStore
 
@@ -220,14 +221,14 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 :deep(.p-tag) {
   --p-tag-gap: 0.375rem;
 }
 
 .backspan::before {
-  @apply m-0 absolute text-muted;
+  position: absolute;
+  margin: 0;
+  color: var(--muted-foreground);
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: -2rem;

apps/desktop-ui/src/views/NotSupportedView.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseViewTemplate>
-    <div class="sad-container">
+    <div class="sad-container grid items-center justify-evenly">
       <!-- Right side image -->
       <img
         class="sad-girl"
@@ -79,10 +79,7 @@ const continueToInstall = async () => {
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 .sad-container {
-  @apply grid items-center justify-evenly;
   grid-template-columns: 25rem 1fr;
 
   & > * {

apps/desktop-ui/src/views/ServerStartView.vue

@@ -232,8 +232,6 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 /* Hide the xterm scrollbar completely */
 :deep(.p-terminal) .xterm-viewport {
   overflow: hidden !important;

browser_tests/fixtures/ComfyPage.ts

@@ -24,6 +24,7 @@ import {
 } from './components/SidebarTab'
 import { Topbar } from './components/Topbar'
 import { CanvasHelper } from './helpers/CanvasHelper'
+import { PerformanceHelper } from './helpers/PerformanceHelper'
 import { ClipboardHelper } from './helpers/ClipboardHelper'
 import { CommandHelper } from './helpers/CommandHelper'
 import { DragDropHelper } from './helpers/DragDropHelper'
@@ -185,6 +186,7 @@ export class ComfyPage {
   public readonly dragDrop: DragDropHelper
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
+  public readonly perf: PerformanceHelper
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -229,6 +231,7 @@ export class ComfyPage {
     this.dragDrop = new DragDropHelper(page, this.assetPath.bind(this))
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
+    this.perf = new PerformanceHelper(page)
   }
 
   get visibleToasts() {
@@ -436,7 +439,13 @@ export const comfyPageFixture = base.extend<{
     }
 
     await comfyPage.setup()
+
+    const isPerf = testInfo.tags.includes('@perf')
+    if (isPerf) await comfyPage.perf.init()
+
     await use(comfyPage)
+
+    if (isPerf) await comfyPage.perf.dispose()
   },
   comfyMouse: async ({ comfyPage }, use) => {
     const comfyMouse = new ComfyMouse(comfyPage)

browser_tests/fixtures/helpers/PerformanceHelper.ts

@@ -0,0 +1,96 @@
+import type { CDPSession, Page } from '@playwright/test'
+
+interface PerfSnapshot {
+  RecalcStyleCount: number
+  RecalcStyleDuration: number
+  LayoutCount: number
+  LayoutDuration: number
+  TaskDuration: number
+  JSHeapUsedSize: number
+  Timestamp: number
+}
+
+export interface PerfMeasurement {
+  name: string
+  durationMs: number
+  styleRecalcs: number
+  styleRecalcDurationMs: number
+  layouts: number
+  layoutDurationMs: number
+  taskDurationMs: number
+  heapDeltaBytes: number
+}
+
+export class PerformanceHelper {
+  private cdp: CDPSession | null = null
+  private snapshot: PerfSnapshot | null = null
+
+  constructor(private readonly page: Page) {}
+
+  async init(): Promise<void> {
+    this.cdp = await this.page.context().newCDPSession(this.page)
+    await this.cdp.send('Performance.enable')
+  }
+
+  async dispose(): Promise<void> {
+    this.snapshot = null
+    if (this.cdp) {
+      try {
+        await this.cdp.send('Performance.disable')
+      } finally {
+        await this.cdp.detach()
+        this.cdp = null
+      }
+    }
+  }
+
+  private async getSnapshot(): Promise<PerfSnapshot> {
+    if (!this.cdp) throw new Error('PerformanceHelper not initialized')
+    const { metrics } = (await this.cdp.send('Performance.getMetrics')) as {
+      metrics: { name: string; value: number }[]
+    }
+    function get(name: string): number {
+      return metrics.find((m) => m.name === name)?.value ?? 0
+    }
+    return {
+      RecalcStyleCount: get('RecalcStyleCount'),
+      RecalcStyleDuration: get('RecalcStyleDuration'),
+      LayoutCount: get('LayoutCount'),
+      LayoutDuration: get('LayoutDuration'),
+      TaskDuration: get('TaskDuration'),
+      JSHeapUsedSize: get('JSHeapUsedSize'),
+      Timestamp: get('Timestamp')
+    }
+  }
+
+  async startMeasuring(): Promise<void> {
+    if (this.snapshot) {
+      throw new Error(
+        'Measurement already in progress — call stopMeasuring() first'
+      )
+    }
+    this.snapshot = await this.getSnapshot()
+  }
+
+  async stopMeasuring(name: string): Promise<PerfMeasurement> {
+    if (!this.snapshot) throw new Error('Call startMeasuring() first')
+    const after = await this.getSnapshot()
+    const before = this.snapshot
+    this.snapshot = null
+
+    function delta(key: keyof PerfSnapshot): number {
+      return after[key] - before[key]
+    }
+
+    return {
+      name,
+      durationMs: delta('Timestamp') * 1000,
+      styleRecalcs: delta('RecalcStyleCount'),
+      styleRecalcDurationMs: delta('RecalcStyleDuration') * 1000,
+      layouts: delta('LayoutCount'),
+      layoutDurationMs: delta('LayoutDuration') * 1000,
+      taskDurationMs: delta('TaskDuration') * 1000,
+      heapDeltaBytes: delta('JSHeapUsedSize')
+    }
+  }
+}

browser_tests/fixtures/selectors.ts

@@ -44,6 +44,12 @@ export const TestIds = {
   node: {
     titleInput: 'node-title-input'
   },
+  selectionToolbox: {
+    colorPickerButton: 'color-picker-button',
+    colorPickerCurrentColor: 'color-picker-current-color',
+    colorBlue: 'blue',
+    colorRed: 'red'
+  },
   widgets: {
     decrement: 'decrement',
     increment: 'increment',
@@ -74,6 +80,7 @@ export type TestIdValue =
   | (typeof TestIds.nodeLibrary)[keyof typeof TestIds.nodeLibrary]
   | (typeof TestIds.propertiesPanel)[keyof typeof TestIds.propertiesPanel]
   | (typeof TestIds.node)[keyof typeof TestIds.node]
+  | (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
   | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
   | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<

browser_tests/globalTeardown.ts

@@ -1,11 +1,14 @@
 import type { FullConfig } from '@playwright/test'
 import dotenv from 'dotenv'
 
+import { writePerfReport } from './helpers/perfReporter'
 import { restorePath } from './utils/backupUtils'
 
 dotenv.config()
 
 export default function globalTeardown(_config: FullConfig) {
+  writePerfReport()
+
   if (!process.env.CI && process.env.TEST_COMFYUI_DIR) {
     restorePath([process.env.TEST_COMFYUI_DIR, 'user'])
     restorePath([process.env.TEST_COMFYUI_DIR, 'models'])

browser_tests/helpers/perfReporter.ts

@@ -0,0 +1,49 @@
+import { mkdirSync, readdirSync, readFileSync, writeFileSync } from 'fs'
+import { join } from 'path'
+
+import type { PerfMeasurement } from '../fixtures/helpers/PerformanceHelper'
+
+export interface PerfReport {
+  timestamp: string
+  gitSha: string
+  branch: string
+  measurements: PerfMeasurement[]
+}
+
+const TEMP_DIR = join('test-results', 'perf-temp')
+
+export function recordMeasurement(m: PerfMeasurement) {
+  mkdirSync(TEMP_DIR, { recursive: true })
+  const filename = `${m.name}-${Date.now()}.json`
+  writeFileSync(join(TEMP_DIR, filename), JSON.stringify(m))
+}
+
+export function writePerfReport(
+  gitSha = process.env.GITHUB_SHA ?? 'local',
+  branch = process.env.GITHUB_HEAD_REF ?? 'local'
+) {
+  if (!readdirSync('test-results', { withFileTypes: true }).length) return
+
+  let tempFiles: string[]
+  try {
+    tempFiles = readdirSync(TEMP_DIR).filter((f) => f.endsWith('.json'))
+  } catch {
+    return
+  }
+  if (tempFiles.length === 0) return
+
+  const measurements: PerfMeasurement[] = tempFiles.map((f) =>
+    JSON.parse(readFileSync(join(TEMP_DIR, f), 'utf-8'))
+  )
+
+  const report: PerfReport = {
+    timestamp: new Date().toISOString(),
+    gitSha,
+    branch,
+    measurements
+  }
+  writeFileSync(
+    join('test-results', 'perf-metrics.json'),
+    JSON.stringify(report, null, 2)
+  )
+}

browser_tests/tests/performance.spec.ts

@@ -0,0 +1,70 @@
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { recordMeasurement } from '../helpers/perfReporter'
+
+test.describe('Performance', { tag: ['@perf'] }, () => {
+  test('canvas idle style recalculations', async ({ comfyPage }) => {
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.perf.startMeasuring()
+
+    // Let the canvas idle for 2 seconds — no user interaction.
+    // Measures baseline style recalcs from reactive state + render loop.
+    for (let i = 0; i < 120; i++) {
+      await comfyPage.nextFrame()
+    }
+
+    const m = await comfyPage.perf.stopMeasuring('canvas-idle')
+    recordMeasurement(m)
+    console.log(
+      `Canvas idle: ${m.styleRecalcs} style recalcs, ${m.layouts} layouts`
+    )
+  })
+
+  test('canvas mouse interaction style recalculations', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.perf.startMeasuring()
+
+    const canvas = comfyPage.canvas
+    const box = await canvas.boundingBox()
+    if (!box) throw new Error('Canvas bounding box not available')
+
+    // Sweep mouse across the canvas — crosses nodes, empty space, slots
+    for (let i = 0; i < 100; i++) {
+      await comfyPage.page.mouse.move(
+        box.x + (box.width * i) / 100,
+        box.y + (box.height * (i % 3)) / 3
+      )
+    }
+
+    const m = await comfyPage.perf.stopMeasuring('canvas-mouse-sweep')
+    recordMeasurement(m)
+    console.log(
+      `Mouse sweep: ${m.styleRecalcs} style recalcs, ${m.layouts} layouts`
+    )
+  })
+
+  test('DOM widget clipping during node selection', async ({ comfyPage }) => {
+    // Load default workflow which has DOM widgets (text inputs, combos)
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.perf.startMeasuring()
+
+    // Select and deselect nodes rapidly to trigger clipping recalculation
+    const canvas = comfyPage.canvas
+    const box = await canvas.boundingBox()
+    if (!box) throw new Error('Canvas bounding box not available')
+
+    for (let i = 0; i < 20; i++) {
+      // Click on canvas area (nodes occupy various positions)
+      await comfyPage.page.mouse.click(
+        box.x + box.width / 3 + (i % 5) * 30,
+        box.y + box.height / 3 + (i % 4) * 30
+      )
+      await comfyPage.nextFrame()
+    }
+
+    const m = await comfyPage.perf.stopMeasuring('dom-widget-clipping')
+    recordMeasurement(m)
+    console.log(`Clipping: ${m.layouts} forced layouts`)
+  })
+})

browser_tests/tests/selectionToolbox.spec.ts

@@ -1,6 +1,8 @@
 import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
 
 import { comfyPageFixture } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 const test = comfyPageFixture
 
@@ -10,6 +12,17 @@ test.beforeEach(async ({ comfyPage }) => {
 const BLUE_COLOR = 'rgb(51, 51, 85)'
 const RED_COLOR = 'rgb(85, 51, 51)'
 
+const getColorPickerButton = (comfyPage: { page: Page }) =>
+  comfyPage.page.getByTestId(TestIds.selectionToolbox.colorPickerButton)
+
+const getColorPickerCurrentColor = (comfyPage: { page: Page }) =>
+  comfyPage.page.getByTestId(TestIds.selectionToolbox.colorPickerCurrentColor)
+
+const getColorPickerGroup = (comfyPage: { page: Page }) =>
+  comfyPage.page.getByRole('group').filter({
+    has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
+  })
+
 test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
@@ -132,28 +145,24 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Color picker button should be visible
-      const colorPickerButton = comfyPage.page.locator(
-        '.selection-toolbox .pi-circle-fill'
-      )
+      const colorPickerButton = getColorPickerButton(comfyPage)
       await expect(colorPickerButton).toBeVisible()
 
       // Click color picker button
       await colorPickerButton.click()
 
       // Color picker dropdown should be visible
-      const colorPickerDropdown = comfyPage.page.locator(
-        '.color-picker-container'
-      )
-      await expect(colorPickerDropdown).toBeVisible()
+      const colorPickerGroup = getColorPickerGroup(comfyPage)
+      await expect(colorPickerGroup).toBeVisible()
 
       // Select a color (e.g., blue)
-      const blueColorOption = colorPickerDropdown.locator(
-        'i[data-testid="blue"]'
+      const blueColorOption = colorPickerGroup.getByTestId(
+        TestIds.selectionToolbox.colorBlue
       )
       await blueColorOption.click()
 
       // Dropdown should close after selection
-      await expect(colorPickerDropdown).not.toBeVisible()
+      await expect(colorPickerGroup).not.toBeVisible()
 
       // Node should have the selected color class/style
       // Note: Exact verification method depends on how color is applied to nodes
@@ -172,22 +181,21 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
         'CLIP Text Encode (Prompt)'
       ])
 
-      const colorPickerButton = comfyPage.page.locator(
-        '.selection-toolbox .pi-circle-fill'
-      )
+      const colorPickerButton = getColorPickerButton(comfyPage)
+      const colorPickerCurrentColor = getColorPickerCurrentColor(comfyPage)
 
       // Initially should show default color
       await expect(colorPickerButton).not.toHaveAttribute('color')
 
       // Click color picker and select a color
       await colorPickerButton.click()
-      const redColorOption = comfyPage.page.locator(
-        '.color-picker-container i[data-testid="red"]'
+      const redColorOption = getColorPickerGroup(comfyPage).getByTestId(
+        TestIds.selectionToolbox.colorRed
       )
       await redColorOption.click()
 
       // Button should now show the selected color
-      await expect(colorPickerButton).toHaveCSS('color', RED_COLOR)
+      await expect(colorPickerCurrentColor).toHaveCSS('color', RED_COLOR)
     })
 
     test('color picker shows mixed state for differently colored selections', async ({
@@ -195,17 +203,17 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // Select first node and color it
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
-      await comfyPage.page
-        .locator('.color-picker-container i[data-testid="blue"]')
+      await getColorPickerButton(comfyPage).click()
+      await getColorPickerGroup(comfyPage)
+        .getByTestId(TestIds.selectionToolbox.colorBlue)
         .click()
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Select second node and color it differently
       await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
-      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
-      await comfyPage.page
-        .locator('.color-picker-container i[data-testid="red"]')
+      await getColorPickerButton(comfyPage).click()
+      await getColorPickerGroup(comfyPage)
+        .getByTestId(TestIds.selectionToolbox.colorRed)
         .click()
 
       // Select both nodes
@@ -215,9 +223,7 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       ])
 
       // Color picker should show null/mixed state
-      const colorPickerButton = comfyPage.page.locator(
-        '.selection-toolbox .pi-circle-fill'
-      )
+      const colorPickerButton = getColorPickerButton(comfyPage)
       await expect(colorPickerButton).not.toHaveAttribute('color')
     })
 
@@ -226,9 +232,9 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // First color a node
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
-      await comfyPage.page
-        .locator('.color-picker-container i[data-testid="blue"]')
+      await getColorPickerButton(comfyPage).click()
+      await getColorPickerGroup(comfyPage)
+        .getByTestId(TestIds.selectionToolbox.colorBlue)
         .click()
 
       // Clear selection
@@ -238,10 +244,8 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Color picker button should show the correct color
-      const colorPickerButton = comfyPage.page.locator(
-        '.selection-toolbox .pi-circle-fill'
-      )
-      await expect(colorPickerButton).toHaveCSS('color', BLUE_COLOR)
+      const colorPickerCurrentColor = getColorPickerCurrentColor(comfyPage)
+      await expect(colorPickerCurrentColor).toHaveCSS('color', BLUE_COLOR)
     })
 
     test('colorization via color picker can be undone', async ({
@@ -249,9 +253,9 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // Select a node and color it
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
-      await comfyPage.page
-        .locator('.color-picker-container i[data-testid="blue"]')
+      await getColorPickerButton(comfyPage).click()
+      await getColorPickerGroup(comfyPage)
+        .getByTestId(TestIds.selectionToolbox.colorBlue)
         .click()
 
       // Undo the colorization

browser_tests/tests/vueNodes/nodeStates/colors.spec.ts

@@ -2,6 +2,7 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
+import { TestIds } from '../../../fixtures/selectors'
 
 test.describe('Vue Node Custom Colors', { tag: '@screenshot' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -19,10 +20,16 @@ test.describe('Vue Node Custom Colors', { tag: '@screenshot' }, () => {
     })
     await loadCheckpointNode.getByText('Load Checkpoint').click()
 
-    await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
-    await comfyPage.page
-      .locator('.color-picker-container')
-      .locator('i[data-testid="blue"]')
+    const colorPickerButton = comfyPage.page.getByTestId(
+      TestIds.selectionToolbox.colorPickerButton
+    )
+    await colorPickerButton.click()
+
+    const colorPickerGroup = comfyPage.page.getByRole('group').filter({
+      has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
+    })
+    await colorPickerGroup
+      .getByTestId(TestIds.selectionToolbox.colorBlue)
       .click()
 
     await expect(comfyPage.canvas).toHaveScreenshot(

docs/guidance/vue-components.md

@@ -39,6 +39,10 @@ Prefer Vue native options when available:
 - Use inline Tailwind CSS only (no `<style>` blocks)
 - Use `cn()` from `@/utils/tailwindUtil` for conditional classes
 - Refer to packages/design-system/src/css/style.css for design tokens and tailwind configuration
+- Exception: when third-party libraries render runtime DOM outside Vue templates
+  (for example xterm internals inside PrimeVue terminal wrappers), scoped
+  `:deep()` selectors are allowed. Add a brief inline comment explaining why the
+  exception is required.
 
 ## Best Practices
 

eslint.config.ts

@@ -22,7 +22,9 @@ const extraFileExtensions = ['.vue']
 
 const commonGlobals = {
   ...globals.browser,
-  __COMFYUI_FRONTEND_VERSION__: 'readonly'
+  __COMFYUI_FRONTEND_VERSION__: 'readonly',
+  __DISTRIBUTION__: 'readonly',
+  __IS_NIGHTLY__: 'readonly'
 } as const
 
 const settings = {

lint-staged.config.ts

@@ -4,6 +4,11 @@ export default {
   'tests-ui/**': () =>
     'echo "Files in tests-ui/ are deprecated. Colocate tests with source files." && exit 1',
 
+  './**/*.{css,vue}': (stagedFiles: string[]) => {
+    const joinedPaths = toJoinedRelativePaths(stagedFiles)
+    return [`pnpm exec stylelint --allow-empty-input ${joinedPaths}`]
+  },
+
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
   './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => {
@@ -22,12 +27,17 @@ export default {
 }
 
 function formatAndEslint(fileNames: string[]) {
-  // Convert absolute paths to relative paths for better ESLint resolution
-  const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
-  const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
+  const joinedPaths = toJoinedRelativePaths(fileNames)
   return [
     `pnpm exec oxfmt --write ${joinedPaths}`,
     `pnpm exec oxlint --fix ${joinedPaths}`,
     `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
   ]
 }
+
+function toJoinedRelativePaths(fileNames: string[]) {
+  const relativePaths = fileNames.map((f) =>
+    path.relative(process.cwd(), f).replace(/\\/g, '/')
+  )
+  return relativePaths.map((p) => `"${p}"`).join(' ')
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.5",
+  "version": "1.41.6",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -29,10 +29,10 @@
     "knip": "knip --cache",
     "lint:fix:no-cache": "oxlint src --type-aware --fix && eslint src --fix",
     "lint:fix": "oxlint src --type-aware --fix && eslint src --cache --fix",
-    "lint:no-cache": "oxlint src --type-aware && eslint src",
+    "lint:no-cache": "pnpm exec stylelint '{apps,packages,src}/**/*.{css,vue}' && oxlint src --type-aware && eslint src",
     "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
-    "lint": "oxlint src --type-aware && eslint src --cache",
+    "lint": "pnpm stylelint && oxlint src --type-aware && eslint src --cache",
     "lint:desktop": "nx run @comfyorg/desktop-ui:lint",
     "locale": "lobe-i18n locale",
     "oxlint": "oxlint src --type-aware",

packages/design-system/src/css/style.css

@@ -156,6 +156,7 @@
 :root {
   --fg-color: #000;
   --bg-color: #fff;
+  --default-transition-duration: 0.1s;
   --comfy-menu-bg: #353535;
   --comfy-menu-secondary-bg: #292929;
   --comfy-topbar-height: 2.5rem;

playwright.config.ts

@@ -36,7 +36,18 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
       timeout: 15000,
-      grepInvert: /@mobile/ // Run all tests except those tagged with @mobile
+      grepInvert: /@mobile|@perf/ // Run all tests except those tagged with @mobile or @perf
+    },
+
+    {
+      name: 'performance',
+      use: {
+        ...devices['Desktop Chrome'],
+        trace: 'retain-on-failure'
+      },
+      timeout: 60_000,
+      grep: /@perf/,
+      fullyParallel: false
     },
 
     {

scripts/perf-report.ts

@@ -0,0 +1,125 @@
+import { existsSync, readFileSync } from 'node:fs'
+
+interface PerfMeasurement {
+  name: string
+  durationMs: number
+  styleRecalcs: number
+  styleRecalcDurationMs: number
+  layouts: number
+  layoutDurationMs: number
+  taskDurationMs: number
+  heapDeltaBytes: number
+}
+
+interface PerfReport {
+  timestamp: string
+  gitSha: string
+  branch: string
+  measurements: PerfMeasurement[]
+}
+
+const CURRENT_PATH = 'test-results/perf-metrics.json'
+const BASELINE_PATH = 'temp/perf-baseline/perf-metrics.json'
+
+function formatDelta(pct: number): string {
+  if (pct >= 20) return `+${pct.toFixed(0)}% 🔴`
+  if (pct >= 10) return `+${pct.toFixed(0)}% 🟠`
+  if (pct > -10) return `${pct >= 0 ? '+' : ''}${pct.toFixed(0)}% ⚪`
+  return `${pct.toFixed(0)}% 🟢`
+}
+
+function formatBytes(bytes: number): string {
+  if (Math.abs(bytes) < 1024) return `${bytes} B`
+  if (Math.abs(bytes) < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function calcDelta(
+  baseline: number,
+  current: number
+): { pct: number; isNew: boolean } {
+  if (baseline > 0) {
+    return { pct: ((current - baseline) / baseline) * 100, isNew: false }
+  }
+  return current > 0 ? { pct: Infinity, isNew: true } : { pct: 0, isNew: false }
+}
+
+function formatDeltaCell(delta: { pct: number; isNew: boolean }): string {
+  return delta.isNew ? 'new 🔴' : formatDelta(delta.pct)
+}
+
+function main() {
+  if (!existsSync(CURRENT_PATH)) {
+    process.stdout.write(
+      '## ⚡ Performance Report\n\nNo perf metrics found. Perf tests may not have run.\n'
+    )
+    process.exit(0)
+  }
+
+  const current: PerfReport = JSON.parse(readFileSync(CURRENT_PATH, 'utf-8'))
+
+  const baseline: PerfReport | null = existsSync(BASELINE_PATH)
+    ? JSON.parse(readFileSync(BASELINE_PATH, 'utf-8'))
+    : null
+
+  const lines: string[] = []
+  lines.push('## ⚡ Performance Report\n')
+
+  if (baseline) {
+    lines.push(
+      '| Metric | Baseline | PR | Δ |',
+      '|--------|----------|-----|---|'
+    )
+
+    for (const m of current.measurements) {
+      const base = baseline.measurements.find((b) => b.name === m.name)
+      if (!base) {
+        lines.push(`| ${m.name}: style recalcs | — | ${m.styleRecalcs} | new |`)
+        lines.push(`| ${m.name}: layouts | — | ${m.layouts} | new |`)
+        lines.push(
+          `| ${m.name}: task duration | — | ${m.taskDurationMs.toFixed(0)}ms | new |`
+        )
+        continue
+      }
+
+      const recalcDelta = calcDelta(base.styleRecalcs, m.styleRecalcs)
+      lines.push(
+        `| ${m.name}: style recalcs | ${base.styleRecalcs} | ${m.styleRecalcs} | ${formatDeltaCell(recalcDelta)} |`
+      )
+
+      const layoutDelta = calcDelta(base.layouts, m.layouts)
+      lines.push(
+        `| ${m.name}: layouts | ${base.layouts} | ${m.layouts} | ${formatDeltaCell(layoutDelta)} |`
+      )
+
+      const taskDelta = calcDelta(base.taskDurationMs, m.taskDurationMs)
+      lines.push(
+        `| ${m.name}: task duration | ${base.taskDurationMs.toFixed(0)}ms | ${m.taskDurationMs.toFixed(0)}ms | ${formatDeltaCell(taskDelta)} |`
+      )
+    }
+  } else {
+    lines.push(
+      'No baseline found — showing absolute values.\n',
+      '| Metric | Value |',
+      '|--------|-------|'
+    )
+    for (const m of current.measurements) {
+      lines.push(`| ${m.name}: style recalcs | ${m.styleRecalcs} |`)
+      lines.push(`| ${m.name}: layouts | ${m.layouts} |`)
+      lines.push(
+        `| ${m.name}: task duration | ${m.taskDurationMs.toFixed(0)}ms |`
+      )
+      lines.push(`| ${m.name}: heap delta | ${formatBytes(m.heapDeltaBytes)} |`)
+    }
+  }
+
+  lines.push('\n<details><summary>Raw data</summary>\n')
+  lines.push('```json')
+  lines.push(JSON.stringify(current, null, 2))
+  lines.push('```')
+  lines.push('\n</details>')
+
+  process.stdout.write(lines.join('\n') + '\n')
+}
+
+main()

scripts/zipdist.js

@@ -1,9 +1,14 @@
 import zipdir from 'zip-dir'
 
-zipdir('./dist', { saveTo: './dist.zip' }, function (err, buffer) {
+const sourceDir = process.argv[2] || './dist'
+const outputPath = process.argv[3] || './dist.zip'
+
+zipdir(sourceDir, { saveTo: outputPath }, function (err, buffer) {
   if (err) {
-    console.error('Error zipping "dist" directory:', err)
+    console.error(`Error zipping "${sourceDir}" directory:`, err)
   } else {
-    console.log('Successfully zipped "dist" directory.')
+    process.stdout.write(
+      `Successfully zipped "${sourceDir}" directory to "${outputPath}".\n`
+    )
   }
 })

src/App.vue

@@ -51,7 +51,6 @@ onMounted(() => {
   // See: https://vite.dev/guide/build#load-error-handling
   window.addEventListener('vite:preloadError', (event) => {
     event.preventDefault()
-    // eslint-disable-next-line no-undef
     if (__DISTRIBUTION__ === 'cloud') {
       captureException(event.payload, {
         tags: { error_type: 'vite_preload_error' }

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -25,7 +25,7 @@
         <!-- First panel: sidebar when left, properties when right -->
         <SplitterPanel
           v-if="
-            !focusMode && (sidebarLocation === 'left' || rightSidePanelVisible)
+            !focusMode && (sidebarLocation === 'left' || showOffsideSplitter)
           "
           :class="
             sidebarLocation === 'left'
@@ -85,7 +85,7 @@
         <!-- Last panel: properties when left, sidebar when right -->
         <SplitterPanel
           v-if="
-            !focusMode && (sidebarLocation === 'right' || rightSidePanelVisible)
+            !focusMode && (sidebarLocation === 'right' || showOffsideSplitter)
           "
           :class="
             sidebarLocation === 'right'
@@ -124,6 +124,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useAppModeStore } from '@/stores/appModeStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
@@ -144,9 +145,13 @@ const unifiedWidth = computed(() =>
 
 const { focusMode } = storeToRefs(workspaceStore)
 
+const appModeStore = useAppModeStore()
 const { activeSidebarTabId, activeSidebarTab } = storeToRefs(sidebarTabStore)
 const { bottomPanelVisible } = storeToRefs(useBottomPanelStore())
 const { isOpen: rightSidePanelVisible } = storeToRefs(rightSidePanelStore)
+const showOffsideSplitter = computed(
+  () => rightSidePanelVisible.value || appModeStore.mode === 'builder:select'
+)
 
 const sidebarPanelVisible = computed(() => activeSidebarTab.value !== null)
 

src/components/TopMenuSection.test.ts

@@ -262,7 +262,7 @@ describe('TopMenuSection', () => {
     )
   })
 
-  it('opens the assets sidebar tab when QPO V2 is enabled', async () => {
+  it('opens the job history sidebar tab when QPO V2 is enabled', async () => {
     const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
     const settingStore = useSettingStore(pinia)
     vi.mocked(settingStore.get).mockImplementation((key) =>
@@ -273,10 +273,10 @@ describe('TopMenuSection', () => {
 
     await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
 
-    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
+    expect(sidebarTabStore.activeSidebarTabId).toBe('job-history')
   })
 
-  it('toggles the assets sidebar tab when QPO V2 is enabled', async () => {
+  it('toggles the job history sidebar tab when QPO V2 is enabled', async () => {
     const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
     const settingStore = useSettingStore(pinia)
     vi.mocked(settingStore.get).mockImplementation((key) =>
@@ -287,7 +287,7 @@ describe('TopMenuSection', () => {
     const toggleButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
 
     await toggleButton.trigger('click')
-    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
+    expect(sidebarTabStore.activeSidebarTabId).toBe('job-history')
 
     await toggleButton.trigger('click')
     expect(sidebarTabStore.activeSidebarTabId).toBe(null)

src/components/TopMenuSection.vue

@@ -62,7 +62,7 @@
               size="md"
               :aria-pressed="
                 isQueuePanelV2Enabled
-                  ? activeSidebarTabId === 'assets'
+                  ? activeSidebarTabId === 'job-history'
                   : isQueueProgressOverlayEnabled
                     ? isQueueOverlayExpanded
                     : undefined
@@ -127,13 +127,15 @@
         <div
           class="pointer-events-none absolute left-0 right-0 top-full mt-1 flex justify-end pr-1"
         >
-          <QueueInlineProgressSummary :hidden="isQueueOverlayExpanded" />
+          <QueueInlineProgressSummary
+            :hidden="shouldHideInlineProgressSummary"
+          />
         </div>
       </Teleport>
       <QueueInlineProgressSummary
         v-else-if="shouldShowInlineProgressSummary && !isActionbarFloating"
         class="pr-1"
-        :hidden="isQueueOverlayExpanded"
+        :hidden="shouldHideInlineProgressSummary"
       />
       <QueueNotificationBannerHost
         v-if="shouldShowQueueNotificationBanners"
@@ -241,6 +243,9 @@ const inlineProgressSummaryTarget = computed(() => {
   }
   return progressTarget.value
 })
+const shouldHideInlineProgressSummary = computed(
+  () => isQueueProgressOverlayEnabled.value && isQueueOverlayExpanded.value
+)
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
@@ -283,7 +288,7 @@ onMounted(() => {
 
 const toggleQueueOverlay = () => {
   if (isQueuePanelV2Enabled.value) {
-    sidebarTabStore.toggleSidebarTab('assets')
+    sidebarTabStore.toggleSidebarTab('job-history')
     return
   }
   commandStore.execute('Comfy.Queue.ToggleOverlay')

src/components/actionbar/ComfyActionbar.vue

@@ -47,7 +47,7 @@
 
     <Teleport v-if="inlineProgressTarget" :to="inlineProgressTarget">
       <QueueInlineProgress
-        :hidden="queueOverlayExpanded"
+        :hidden="shouldHideInlineProgress"
         :radius-class="cn(isDocked ? 'rounded-[7px]' : 'rounded-[5px]')"
         data-testid="queue-inline-progress"
       />
@@ -287,6 +287,9 @@ const inlineProgressTarget = computed(() => {
   if (isDocked.value) return topMenuContainer ?? null
   return panelElement.value
 })
+const shouldHideInlineProgress = computed(
+  () => !isQueuePanelV2Enabled.value && queueOverlayExpanded
+)
 watch(
   panelElement,
   (target) => {

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -103,13 +103,12 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@reference '../../../../assets/css/style.css';
-
 :deep(.p-terminal) .xterm {
-  @apply overflow-hidden;
+  overflow: hidden;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  @apply bg-neutral-900 overflow-hidden;
+  overflow: hidden;
+  background-color: var(--color-neutral-900);
 }
 </style>

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -195,8 +195,6 @@ onUpdated(() => {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .subgraph-breadcrumb:not(:empty) {
   flex: auto;
   flex-shrink: 10000;
@@ -205,7 +203,7 @@ onUpdated(() => {
 
 .subgraph-breadcrumb,
 :deep(.p-breadcrumb) {
-  @apply overflow-hidden;
+  overflow: hidden;
 }
 
 :deep(.p-breadcrumb) {
@@ -214,7 +212,10 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item) {
-  @apply flex items-center overflow-hidden h-8;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  height: calc(var(--spacing) * 8);
   min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem);
   border: 1px solid transparent;
   background-color: transparent;
@@ -236,7 +237,7 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item:hover) {
-  @apply rounded-lg;
+  border-radius: var(--radius-lg);
   border-color: var(--interface-stroke);
   background-color: var(--comfy-menu-bg);
 }
@@ -270,18 +271,16 @@ onUpdated(() => {
 </style>
 
 <style>
-@reference '../../assets/css/style.css';
-
 .subgraph-breadcrumb-collapse .p-breadcrumb-list {
   .p-breadcrumb-item,
   .p-breadcrumb-separator {
-    @apply hidden;
+    display: none;
   }
 
   .p-breadcrumb-item:nth-last-child(3),
   .p-breadcrumb-separator:nth-last-child(2),
   .p-breadcrumb-item:nth-last-child(1) {
-    @apply flex;
+    display: flex;
   }
 }
 </style>

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -186,19 +186,19 @@ const inputBlur = async (doRename: boolean) => {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .p-breadcrumb-item-link,
 .p-breadcrumb-item-icon {
-  @apply select-none;
+  user-select: none;
 }
 
 .p-breadcrumb-item-link {
-  @apply overflow-hidden;
+  overflow: hidden;
 }
 
 .p-breadcrumb-item-label {
-  @apply whitespace-nowrap text-ellipsis overflow-hidden;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .active-breadcrumb-item {

src/components/builder/AppBuilder.vue

@@ -0,0 +1,324 @@
+<script setup lang="ts">
+import { remove } from 'es-toolkit'
+import { computed, ref, toValue } from 'vue'
+import type { MaybeRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import DraggableList from '@/components/common/DraggableList.vue'
+import IoItem from '@/components/builder/IoItem.vue'
+import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
+import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import { TitleMode } from '@/lib/litegraph/src/types/globalEnums'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { BaseWidget } from '@/lib/litegraph/src/widgets/BaseWidget'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
+import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
+import { app } from '@/scripts/app'
+import { DOMWidgetImpl } from '@/scripts/domWidget'
+import { useDialogService } from '@/services/dialogService'
+import { useAppModeStore } from '@/stores/appModeStore'
+import { cn } from '@/utils/tailwindUtil'
+
+type BoundStyle = { top: string; left: string; width: string; height: string }
+
+const appModeStore = useAppModeStore()
+const canvasInteractions = useCanvasInteractions()
+const canvasStore = useCanvasStore()
+const settingStore = useSettingStore()
+const workflowStore = useWorkflowStore()
+const { t } = useI18n()
+const canvas: LGraphCanvas = canvasStore.getCanvas()
+
+const hoveringSelectable = ref(false)
+
+workflowStore.activeWorkflow?.changeTracker?.reset()
+
+const inputsWithState = computed(() =>
+  appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
+    const node = app.rootGraph.getNodeById(nodeId)
+    const widget = node?.widgets?.find((w) => w.name === widgetName)
+    if (!node || !widget) return { nodeId, widgetName }
+
+    const input = node.inputs.find((i) => i.widget?.name === widget.name)
+    const rename = input && (() => renameWidget(widget, input))
+
+    return {
+      nodeId,
+      widgetName,
+      label: widget.label,
+      subLabel: node.title,
+      rename
+    }
+  })
+)
+const outputsWithState = computed<[NodeId, string][]>(() =>
+  appModeStore.selectedOutputs.map((nodeId) => [
+    nodeId,
+    app.rootGraph.getNodeById(nodeId)?.title ?? String(nodeId)
+  ])
+)
+
+async function renameWidget(widget: IBaseWidget, input: INodeInputSlot) {
+  const newLabel = await useDialogService().prompt({
+    title: t('g.rename'),
+    message: t('g.enterNewNamePrompt'),
+    defaultValue: widget.label,
+    placeholder: widget.name
+  })
+  if (newLabel === null) return
+  widget.label = newLabel || undefined
+  input.label = newLabel || undefined
+  widget.callback?.(widget.value)
+  useCanvasStore().canvas?.setDirty(true)
+}
+
+function getHovered(
+  e: MouseEvent
+): undefined | [LGraphNode, undefined] | [LGraphNode, IBaseWidget] {
+  const { graph } = canvas
+  if (!canvas || !graph) return
+
+  if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
+  if (!e) return
+
+  canvas.adjustMouseEvent(e)
+  const node = graph.getNodeOnPos(e.canvasX, e.canvasY)
+  if (!node) return
+
+  const widget = node.getWidgetOnPos(e.canvasX, e.canvasY, false)
+
+  if (widget || node.constructor.nodeData?.output_node) return [node, widget]
+}
+
+function getBounding(nodeId: NodeId, widgetName?: string) {
+  if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
+  const node = app.rootGraph.getNodeById(nodeId)
+  if (!node) return
+
+  const titleOffset =
+    node.title_mode === TitleMode.NORMAL_TITLE ? LiteGraph.NODE_TITLE_HEIGHT : 0
+
+  if (!widgetName)
+    return {
+      width: `${node.size[0]}px`,
+      height: `${node.size[1] + titleOffset}px`,
+      left: `${node.pos[0]}px`,
+      top: `${node.pos[1] - titleOffset}px`
+    }
+  const widget = node.widgets?.find((w) => w.name === widgetName)
+  if (!widget) return
+
+  const margin = widget instanceof DOMWidgetImpl ? widget.margin : undefined
+  const marginX = margin ?? BaseWidget.margin
+  const height =
+    (widget.computedHeight !== undefined
+      ? widget.computedHeight - 4
+      : LiteGraph.NODE_WIDGET_HEIGHT) - (margin ? 2 * margin - 4 : 0)
+  return {
+    width: `${node.size[0] - marginX * 2}px`,
+    height: `${height}px`,
+    left: `${node.pos[0] + marginX}px`,
+    top: `${node.pos[1] + widget.y + (margin ?? 0)}px`
+  }
+}
+
+function handleDown(e: MouseEvent) {
+  const [node] = getHovered(e) ?? []
+  if (!node || e.button > 0) canvasInteractions.forwardEventToCanvas(e)
+}
+function handleClick(e: MouseEvent) {
+  const [node, widget] = getHovered(e) ?? []
+  if (!node) return canvasInteractions.forwardEventToCanvas(e)
+
+  if (!widget) {
+    if (!node.constructor.nodeData?.output_node)
+      return canvasInteractions.forwardEventToCanvas(e)
+    const index = appModeStore.selectedOutputs.findIndex((id) => id === node.id)
+    if (index === -1) appModeStore.selectedOutputs.push(node.id)
+    else appModeStore.selectedOutputs.splice(index, 1)
+    return
+  }
+
+  const index = appModeStore.selectedInputs.findIndex(
+    ([nodeId, widgetName]) => node.id === nodeId && widget.name === widgetName
+  )
+  if (index === -1) appModeStore.selectedInputs.push([node.id, widget.name])
+  else appModeStore.selectedInputs.splice(index, 1)
+}
+
+function nodeToDisplayTuple(
+  n: LGraphNode
+): [NodeId, MaybeRef<BoundStyle> | undefined, boolean] {
+  return [
+    n.id,
+    getBounding(n.id),
+    appModeStore.selectedOutputs.some((id) => n.id === id)
+  ]
+}
+
+const renderedOutputs = computed(() => {
+  void appModeStore.selectedOutputs.length
+  return canvas
+    .graph!.nodes.filter((n) => n.constructor.nodeData?.output_node)
+    .map(nodeToDisplayTuple)
+})
+const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
+  () =>
+    appModeStore.selectedInputs.map(([nodeId, widgetName]) => [
+      `${nodeId}: ${widgetName}`,
+      getBounding(nodeId, widgetName)
+    ])
+)
+</script>
+<template>
+  <div class="flex font-bold p-2 border-border-subtle border-b items-center">
+    {{ t('linearMode.builder.title') }}
+    <Button class="ml-auto" @click="appModeStore.exitBuilder">
+      {{ t('linearMode.builder.exit') }}
+    </Button>
+  </div>
+  <PropertiesAccordionItem
+    :label="t('nodeHelpPage.inputs')"
+    enable-empty-state
+    :disabled="!appModeStore.selectedInputs.length"
+    class="border-border-subtle border-b"
+    :tooltip="`${t('linearMode.builder.inputsDesc')}\n${t('linearMode.builder.inputsExample')}`"
+  >
+    <template #label>
+      <div class="flex gap-3">
+        {{ t('nodeHelpPage.inputs') }}
+        <i class="bg-muted-foreground icon-[lucide--circle-alert]" />
+      </div>
+    </template>
+    <template #empty>
+      <div
+        class="w-full p-4 pt-2 text-muted-foreground"
+        v-text="t('linearMode.builder.promptAddInputs')"
+      />
+    </template>
+    <div
+      class="w-full p-4 pt-2 text-muted-foreground"
+      v-text="t('linearMode.builder.promptAddInputs')"
+    />
+    <DraggableList v-slot="{ dragClass }" v-model="appModeStore.selectedInputs">
+      <IoItem
+        v-for="{
+          nodeId,
+          widgetName,
+          label,
+          subLabel,
+          rename
+        } in inputsWithState"
+        :key="`${nodeId}: ${widgetName}`"
+        :class="cn(dragClass, 'bg-primary-background/30 p-2 my-2 rounded-lg')"
+        :title="label ?? widgetName"
+        :sub-title="subLabel"
+        :rename
+        :remove="
+          () =>
+            remove(
+              appModeStore.selectedInputs,
+              ([id, name]) => nodeId === id && widgetName === name
+            )
+        "
+      />
+    </DraggableList>
+  </PropertiesAccordionItem>
+  <PropertiesAccordionItem
+    :label="t('nodeHelpPage.outputs')"
+    enable-empty-state
+    :disabled="!appModeStore.selectedOutputs.length"
+    :tooltip="`${t('linearMode.builder.outputsDesc')}\n${t('linearMode.builder.outputsExample')}`"
+  >
+    <template #label>
+      <div class="flex gap-3">
+        {{ t('nodeHelpPage.outputs') }}
+        <i class="bg-muted-foreground icon-[lucide--circle-alert]" />
+      </div>
+    </template>
+    <template #empty>
+      <div
+        class="w-full p-4 pt-2 text-muted-foreground"
+        v-text="t('linearMode.builder.promptAddOutputs')"
+      />
+    </template>
+    <div
+      class="w-full p-4 pt-2 text-muted-foreground"
+      v-text="t('linearMode.builder.promptAddOutputs')"
+    />
+    <DraggableList
+      v-slot="{ dragClass }"
+      v-model="appModeStore.selectedOutputs"
+    >
+      <IoItem
+        v-for="([key, title], index) in outputsWithState"
+        :key
+        :class="
+          cn(
+            dragClass,
+            'bg-warning-background/40 p-2 my-2 rounded-lg',
+            index === 0 && 'ring-warning-background ring-2'
+          )
+        "
+        :title
+        :sub-title="String(key)"
+        :remove="() => remove(appModeStore.selectedOutputs, (k) => k === key)"
+      />
+    </DraggableList>
+  </PropertiesAccordionItem>
+
+  <Teleport to="body">
+    <div
+      :class="
+        cn(
+          'absolute w-full h-full pointer-events-auto',
+          hoveringSelectable ? 'cursor-pointer' : 'cursor-grab'
+        )
+      "
+      @pointerdown="handleDown"
+      @pointermove="hoveringSelectable = !!getHovered($event)"
+      @click="handleClick"
+      @wheel="canvasInteractions.forwardEventToCanvas"
+    >
+      <TransformPane :canvas="canvasStore.getCanvas()">
+        <div
+          v-for="[key, style] in renderedInputs"
+          :key
+          :style="toValue(style)"
+          class="fixed bg-primary-background/30 rounded-lg"
+        />
+        <div
+          v-for="[key, style, isSelected] in renderedOutputs"
+          :key
+          :style="toValue(style)"
+          :class="
+            cn(
+              'fixed ring-warning-background ring-5 rounded-2xl',
+              !isSelected && 'ring-warning-background/50'
+            )
+          "
+        >
+          <div class="absolute top-0 right-0 size-8">
+            <div
+              v-if="isSelected"
+              class="absolute -top-1/2 -right-1/2 size-full p-2 bg-warning-background rounded-lg"
+            >
+              <i class="icon-[lucide--check] bg-text-foreground size-full" />
+            </div>
+            <div
+              v-else
+              class="absolute -top-1/2 -right-1/2 size-full ring-warning-background/50 ring-4 ring-inset bg-component-node-background rounded-lg"
+            />
+          </div>
+        </div>
+      </TransformPane>
+    </div>
+  </Teleport>
+</template>

src/components/builder/BuilderToolbar.vue

@@ -62,6 +62,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useEventListener } from '@vueuse/core'
 
 import { useAppModeStore } from '@/stores/appModeStore'
 import type { AppMode } from '@/stores/appModeStore'
@@ -75,6 +76,14 @@ import type { BuilderToolbarStep } from './types'
 const { t } = useI18n()
 const appModeStore = useAppModeStore()
 
+useEventListener(document, 'keydown', (e: KeyboardEvent) => {
+  if (e.key !== 'Escape') return
+
+  e.preventDefault()
+  e.stopPropagation()
+  void appModeStore.exitBuilder()
+})
+
 const activeStep = computed(() =>
   appModeStore.isBuilderSaving ? 'save' : appModeStore.mode
 )

src/components/builder/IoItem.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Popover from '@/components/ui/Popover.vue'
+import Button from '@/components/ui/button/Button.vue'
+
+const { t } = useI18n()
+
+const { rename, remove } = defineProps<{
+  title: string
+  subTitle?: string
+  rename?: () => void
+  remove?: () => void
+}>()
+
+const entries = computed(() => {
+  const items = []
+  if (rename)
+    items.push({
+      label: t('g.rename'),
+      command: rename,
+      icon: 'icon-[lucide--pencil]'
+    })
+  if (remove)
+    items.push({
+      label: t('g.delete'),
+      command: remove,
+      icon: 'icon-[lucide--trash-2]'
+    })
+  return items
+})
+</script>
+<template>
+  <div class="p-2 my-2 rounded-lg flex items-center-safe">
+    <span class="mr-auto" v-text="title" />
+    <span class="text-muted-foreground mr-2 text-end" v-text="subTitle" />
+    <Popover :entries>
+      <template #button>
+        <Button variant="muted-textonly">
+          <i class="icon-[lucide--ellipsis]" />
+        </Button>
+      </template>
+    </Popover>
+  </div>
+</template>

src/components/builder/useBuilderSave.ts

@@ -33,12 +33,10 @@ export function useBuilderSave() {
       return
     }
 
-    // TODO: Update this to show the save dialog if it is temp OR if the user has not saved app mode before.
-    // If they have saved app mode before, just save the workflow, but use the initial app mode state not current.
-
-    if (!workflow.isTemporary) {
+    if (!workflow.isTemporary && workflow.activeState.extra?.linearMode) {
       try {
         workflow.changeTracker?.checkState()
+        appModeStore.saveSelectedToWorkflow()
         await workflowService.saveWorkflow(workflow)
         showSuccessDialog(workflow.filename, appModeStore.isAppMode)
       } catch {
@@ -75,6 +73,7 @@ export function useBuilderSave() {
       const workflow = workflowStore.activeWorkflow
       if (!workflow) return
 
+      appModeStore.saveSelectedToWorkflow()
       const saved = await workflowService.saveWorkflowAs(workflow, {
         filename,
         openAsApp

src/components/common/DraggableList.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts" generic="T">
+import { onBeforeUnmount, ref, useTemplateRef, watchPostEffect } from 'vue'
+
+import { DraggableList } from '@/scripts/ui/draggableList'
+
+const modelValue = defineModel<T[]>({ required: true })
+const draggableList = ref<DraggableList>()
+const draggableItems = useTemplateRef('draggableItems')
+
+watchPostEffect(() => {
+  void modelValue.value.length
+  draggableList.value?.dispose()
+  if (!draggableItems.value?.children?.length) return
+  draggableList.value = new DraggableList(
+    draggableItems.value,
+    '.draggable-item'
+  )
+  draggableList.value.applyNewItemsOrder = function () {
+    const reorderedItems = []
+
+    let oldPosition = -1
+    this.getAllItems().forEach((item, index) => {
+      if (item === this.draggableItem) {
+        oldPosition = index
+        return
+      }
+      if (!this.isItemToggled(item)) {
+        reorderedItems[index] = item
+        return
+      }
+      const newIndex = this.isItemAbove(item) ? index + 1 : index - 1
+      reorderedItems[newIndex] = item
+    })
+
+    for (let index = 0; index < this.getAllItems().length; index++) {
+      const item = reorderedItems[index]
+      if (typeof item === 'undefined') {
+        reorderedItems[index] = this.draggableItem
+      }
+    }
+    const newPosition = reorderedItems.indexOf(this.draggableItem)
+    const itemList = modelValue.value
+    const [item] = itemList.splice(oldPosition, 1)
+    itemList.splice(newPosition, 0, item)
+    modelValue.value = [...itemList]
+  }
+})
+
+onBeforeUnmount(() => {
+  draggableList.value?.dispose()
+})
+</script>
+<template>
+  <div ref="draggableItems" class="pb-2 px-2 space-y-0.5 mt-0.5">
+    <slot
+      drag-class="draggable-item drag-handle cursor-grab [&.is-draggable]:cursor-grabbing"
+    />
+  </div>
+</template>

src/components/common/FormItem.vue

@@ -117,20 +117,18 @@ function getFormComponent(item: FormItem): Component {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .form-input :deep(.input-slider) .p-inputnumber input,
 .form-input :deep(.input-slider) .slider-part {
-  @apply w-20;
+  width: 5rem;
 }
 
 .form-input :deep(.input-knob) .p-inputnumber input,
 .form-input :deep(.input-knob) .knob-part {
-  @apply w-32;
+  width: 8rem;
 }
 
 .form-input :deep(.p-inputtext),
 .form-input :deep(.p-select) {
-  @apply w-44;
+  width: 11rem;
 }
 </style>

src/components/common/SearchBox.vue

@@ -133,8 +133,6 @@ const wrapperStyle = computed(() => {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 :deep(.p-inputtext) {
   --p-form-field-padding-x: 0.625rem;
 }

src/components/common/SearchFilterChip.vue

@@ -1,6 +1,6 @@
 <template>
-  <Chip removable @remove="$emit('remove', $event)">
-    <Badge size="small" :class="badgeClass">
+  <Chip removable @remove="emit('remove', $event)">
+    <Badge size="small" :class="semanticBadgeClass">
       {{ badge }}
     </Badge>
     {{ text }}
@@ -10,6 +10,7 @@
 <script setup lang="ts">
 import Badge from 'primevue/badge'
 import Chip from 'primevue/chip'
+import { computed } from 'vue'
 
 export interface SearchFilter {
   text: string
@@ -18,26 +19,19 @@ export interface SearchFilter {
   id: string | number
 }
 
-defineProps<Omit<SearchFilter, 'id'>>()
-defineEmits(['remove'])
+const semanticClassMap: Record<string, string> = {
+  'i-badge': 'bg-green-500 text-white',
+  'o-badge': 'bg-red-500 text-white',
+  'c-badge': 'bg-blue-500 text-white',
+  's-badge': 'bg-yellow-500'
+}
+
+const props = defineProps<Omit<SearchFilter, 'id'>>()
+const emit = defineEmits<{
+  (e: 'remove', event: Event): void
+}>()
+
+const semanticBadgeClass = computed(() => {
+  return semanticClassMap[props.badgeClass] ?? props.badgeClass
+})
 </script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-:deep(.i-badge) {
-  @apply bg-green-500 text-white;
-}
-
-:deep(.o-badge) {
-  @apply bg-red-500 text-white;
-}
-
-:deep(.c-badge) {
-  @apply bg-blue-500 text-white;
-}
-
-:deep(.s-badge) {
-  @apply bg-yellow-500;
-}
-</style>

src/components/curve/CurveEditor.test.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
-import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
+import type { CurvePoint } from './types'
 
 import CurveEditor from './CurveEditor.vue'
 

src/components/curve/CurveEditor.vue

@@ -77,7 +77,8 @@
 import { computed, useTemplateRef } from 'vue'
 
 import { useCurveEditor } from '@/composables/useCurveEditor'
-import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
+
+import type { CurvePoint } from './types'
 
 import { histogramToPath } from './curveUtils'
 

src/components/curve/WidgetCurve.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
+import type { CurvePoint } from './types'
 
 import CurveEditor from './CurveEditor.vue'
 

src/components/curve/curveUtils.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
+import type { CurvePoint } from './types'
 
 import {
   createMonotoneInterpolator,

src/components/curve/curveUtils.ts

@@ -1,4 +1,4 @@
-import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
+import type { CurvePoint } from './types'
 
 /**
  * Monotone cubic Hermite interpolation.
@@ -95,15 +95,15 @@ export function histogramToPath(histogram: Uint32Array): string {
   const max = sorted[Math.floor(255 * 0.995)]
   if (max === 0) return ''
 
-  const step = 1 / 255
-  let d = 'M0,1'
+  const invMax = 1 / max
+  const parts: string[] = ['M0,1']
   for (let i = 0; i < 256; i++) {
-    const x = i * step
-    const y = 1 - Math.min(1, histogram[i] / max)
-    d += ` L${x.toFixed(4)},${y.toFixed(4)}`
+    const x = i / 255
+    const y = 1 - Math.min(1, histogram[i] * invMax)
+    parts.push(`L${x},${y}`)
   }
-  d += ' L1,1 Z'
-  return d
+  parts.push('L1,1 Z')
+  return parts.join(' ')
 }
 
 export function curvesToLUT(points: CurvePoint[]): Uint8Array {

src/components/curve/types.ts

@@ -0,0 +1 @@
+export type CurvePoint = [x: number, y: number]

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -438,7 +438,6 @@ onMounted(() => {
 const systemStatsStore = useSystemStatsStore()
 
 const distributions = computed(() => {
-  // eslint-disable-next-line no-undef
   switch (__DISTRIBUTION__) {
     case 'cloud':
       return [TemplateIncludeOnDistributionEnum.Cloud]

src/components/dialog/GlobalDialog.vue

@@ -71,20 +71,30 @@ function getDialogPt(item: {
 </script>
 
 <style>
-@reference '../../assets/css/style.css';
-
 .global-dialog {
   max-width: calc(100vw - 1rem);
 }
 
 .global-dialog .p-dialog-header {
-  @apply p-2 2xl:p-[var(--p-dialog-header-padding)];
-  @apply pb-0;
+  padding: calc(var(--spacing) * 2);
+  padding-bottom: 0;
 }
 
 .global-dialog .p-dialog-content {
-  @apply p-2 2xl:p-[var(--p-dialog-content-padding)];
-  @apply pt-0;
+  padding: calc(var(--spacing) * 2);
+  padding-top: 0;
+}
+
+@media (min-width: 1536px) {
+  .global-dialog .p-dialog-header {
+    padding: var(--p-dialog-header-padding);
+    padding-bottom: 0;
+  }
+
+  .global-dialog .p-dialog-content {
+    padding: var(--p-dialog-content-padding);
+    padding-top: 0;
+  }
 }
 
 /* Workspace mode: wider settings dialog */

src/components/dialog/content/MissingNodesContent.vue

@@ -234,6 +234,7 @@ import { isCloud } from '@/platform/distribution/types'
 import type { NodeReplacement } from '@/platform/nodeReplacement/types'
 import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { cn } from '@/utils/tailwindUtil'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
@@ -245,6 +246,7 @@ const { missingNodeTypes } = defineProps<{
 const { missingCoreNodes } = useMissingNodes()
 const { replaceNodesInPlace } = useNodeReplacement()
 const dialogStore = useDialogStore()
+const executionErrorStore = useExecutionErrorStore()
 
 interface ProcessedNode {
   label: string
@@ -339,6 +341,11 @@ function handleReplaceSelected() {
   replacedTypes.value = nextReplaced
   selectedTypes.value = nextSelected
 
+  // Sync with execution error store so the Errors Tab updates immediately
+  if (result.length > 0) {
+    executionErrorStore.removeMissingNodesByType(result)
+  }
+
   // Auto-close when all replaceable nodes replaced and no non-replaceable remain
   const allReplaced = replaceableNodes.value.every((n) =>
     nextReplaced.has(n.label)

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -17,9 +17,9 @@
       }"
       @row-dblclick="editKeybinding($event.data)"
     >
-      <Column field="actions" header="">
+      <Column field="actions" header="" :pt="{ bodyCell: 'p-1 min-h-8' }">
         <template #body="slotProps">
-          <div class="actions invisible flex flex-row">
+          <div class="actions flex flex-row">
             <Button
               variant="textonly"
               size="icon"
@@ -56,6 +56,7 @@
         :header="$t('g.command')"
         sortable
         class="max-w-64 2xl:max-w-full"
+        :pt="{ bodyCell: 'p-1 min-h-8' }"
       >
         <template #body="slotProps">
           <div class="truncate" :title="slotProps.data.id">
@@ -63,7 +64,11 @@
           </div>
         </template>
       </Column>
-      <Column field="keybinding" :header="$t('g.keybinding')">
+      <Column
+        field="keybinding"
+        :header="$t('g.keybinding')"
+        :pt="{ bodyCell: 'p-1 min-h-8' }"
+      >
         <template #body="slotProps">
           <KeyComboDisplay
             v-if="slotProps.data.keybinding"
@@ -75,7 +80,11 @@
           <span v-else>-</span>
         </template>
       </Column>
-      <Column field="source" :header="$t('g.source')">
+      <Column
+        field="source"
+        :header="$t('g.source')"
+        :pt="{ bodyCell: 'p-1 min-h-8' }"
+      >
         <template #body="slotProps">
           <span class="overflow-hidden text-ellipsis">{{
             slotProps.data.source || '-'
@@ -293,17 +302,3 @@ async function resetAllKeybindings() {
   })
 }
 </script>
-
-<style scoped>
-@reference '../../../../assets/css/style.css';
-
-:deep(.p-datatable-tbody) > tr > td {
-  @apply p-1;
-  min-height: 2rem;
-}
-
-:deep(.p-datatable-row-selected) .actions,
-:deep(.p-datatable-selectable-row:hover) .actions {
-  @apply visible;
-}
-</style>

src/components/dialog/content/signin/SignInForm.test.ts

@@ -98,16 +98,17 @@ describe('SignInForm', () => {
       await nextTick()
 
       const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.cursor-pointer'
+        'span.text-muted.text-base.font-medium.select-none'
       )
 
-      expect(forgotPasswordSpan.classes()).toContain('text-link-disabled')
+      expect(forgotPasswordSpan.classes()).toContain('cursor-not-allowed')
+      expect(forgotPasswordSpan.classes()).toContain('opacity-50')
     })
 
     it('shows toast and focuses email input when clicked while disabled', async () => {
       const wrapper = mountComponent()
       const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.cursor-pointer'
+        'span.text-muted.text-base.font-medium.select-none'
       )
 
       // Mock getElementById to track focus
@@ -152,7 +153,7 @@ describe('SignInForm', () => {
       )
 
       const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.cursor-pointer'
+        'span.text-muted.text-base.font-medium.select-none'
       )
 
       // Click the forgot password link

src/components/dialog/content/signin/SignInForm.vue

@@ -34,10 +34,13 @@
           {{ t('auth.login.passwordLabel') }}
         </label>
         <span
-          class="cursor-pointer text-base font-medium text-muted select-none"
-          :class="{
-            'text-link-disabled': !$form.email?.value || $form.email?.invalid
-          }"
+          :class="
+            cn('text-base font-medium text-muted select-none', {
+              'cursor-not-allowed opacity-50':
+                !$form.email?.value || $form.email?.invalid,
+              'cursor-pointer': $form.email?.value && !$form.email?.invalid
+            })
+          "
           @click="handleForgotPassword($form.email?.value, $form.email?.valid)"
         >
           {{ t('auth.login.forgotPassword') }}
@@ -89,6 +92,7 @@ import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthAction
 import { signInSchema } from '@/schemas/signInSchema'
 import type { SignInData } from '@/schemas/signInSchema'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { cn } from '@/utils/tailwindUtil'
 
 const authStore = useFirebaseAuthStore()
 const firebaseAuthActions = useFirebaseAuthActions()
@@ -126,11 +130,3 @@ const handleForgotPassword = async (
   await firebaseAuthActions.sendPasswordReset(email)
 }
 </script>
-
-<style scoped>
-@reference '../../../../assets/css/style.css';
-
-.text-link-disabled {
-  @apply opacity-50 cursor-not-allowed;
-}
-</style>

src/components/graph/GraphCanvas.vue

@@ -38,7 +38,8 @@
       <BottomPanel />
     </template>
     <template v-if="showUI" #right-side-panel>
-      <NodePropertiesPanel v-if="!appModeStore.isBuilderMode" />
+      <AppBuilder v-if="appModeStore.mode === 'builder:select'" />
+      <NodePropertiesPanel v-else-if="!appModeStore.isBuilderMode" />
     </template>
     <template #graph-canvas-panel>
       <GraphCanvasMenu
@@ -126,6 +127,7 @@ import {
 import { useI18n } from 'vue-i18n'
 
 import { isMiddlePointerInput } from '@/base/pointerUtils'
+import AppBuilder from '@/components/builder/AppBuilder.vue'
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'

src/components/graph/selectionToolbox/ColorPickerButton.test.ts

@@ -8,20 +8,38 @@ import { createI18n } from 'vue-i18n'
 
 // Import after mocks
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import type { LoadedComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import type { LoadedComfyWorkflow } from '@/platform/workflow/management/stores/comfyWorkflow'
+import {
+  ComfyWorkflow,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { ChangeTracker } from '@/scripts/changeTracker'
+import { defaultGraph } from '@/scripts/defaultGraph'
 import { createMockPositionable } from '@/utils/__tests__/litegraphTestUtils'
 
 function createMockWorkflow(
   overrides: Partial<LoadedComfyWorkflow> = {}
 ): LoadedComfyWorkflow {
-  return {
-    changeTracker: {
+  const workflow = new ComfyWorkflow({
+    path: 'workflows/color-picker-test.json',
+    modified: 0,
+    size: 0
+  })
+
+  const changeTracker = Object.assign(
+    new ChangeTracker(workflow, structuredClone(defaultGraph)),
+    {
       checkState: vi.fn() as Mock
-    },
+    }
+  )
+
+  const workflowOverrides = {
+    changeTracker,
     ...overrides
-  } as Partial<LoadedComfyWorkflow> as LoadedComfyWorkflow
+  } satisfies Partial<LoadedComfyWorkflow>
+
+  return Object.assign(workflow, workflowOverrides) as LoadedComfyWorkflow
 }
 
 // Mock the litegraph module
@@ -110,12 +128,14 @@ describe('ColorPickerButton', () => {
     const wrapper = createWrapper()
     const button = wrapper.find('button')
 
-    expect(wrapper.find('.color-picker-container').exists()).toBe(false)
+    expect(wrapper.findComponent({ name: 'SelectButton' }).exists()).toBe(false)
 
     await button.trigger('click')
-    expect(wrapper.find('.color-picker-container').exists()).toBe(true)
+    const picker = wrapper.findComponent({ name: 'SelectButton' })
+    expect(picker.exists()).toBe(true)
+    expect(picker.findAll('button').length).toBeGreaterThan(0)
 
     await button.trigger('click')
-    expect(wrapper.find('.color-picker-container').exists()).toBe(false)
+    expect(wrapper.findComponent({ name: 'SelectButton' }).exists()).toBe(false)
   })
 })

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -11,13 +11,17 @@
       @click="() => (showColorPicker = !showColorPicker)"
     >
       <div class="flex items-center gap-1 px-0">
-        <i class="pi pi-circle-fill" :style="{ color: currentColor ?? '' }" />
+        <i
+          class="pi pi-circle-fill"
+          data-testid="color-picker-current-color"
+          :style="{ color: currentColor ?? '' }"
+        />
         <i class="icon-[lucide--chevron-down]" />
       </div>
     </Button>
     <div
       v-if="showColorPicker"
-      class="color-picker-container absolute -top-10 left-1/2"
+      class="absolute -top-10 left-1/2 -translate-x-1/2"
     >
       <SelectButton
         :model-value="selectedColorOption"
@@ -159,13 +163,7 @@ watch(
 </script>
 
 <style scoped>
-@reference '../../../assets/css/style.css';
-
-.color-picker-container {
-  transform: translateX(-50%);
-}
-
 :deep(.p-togglebutton) {
-  @apply py-2 px-1;
+  padding: calc(var(--spacing) * 2) var(--spacing);
 }
 </style>

src/components/graph/widgets/DomWidget.vue

@@ -2,13 +2,14 @@
   <div
     v-show="widgetState.visible"
     ref="widgetElement"
-    class="dom-widget"
+    class="dom-widget h-full w-full"
     :title="tooltip"
     :style="style"
   >
     <component
       :is="widget.component"
       v-if="isComponentWidget(widget)"
+      class="h-full w-full"
       :model-value="widget.value"
       :widget="widget"
       v-bind="widget.props"
@@ -174,6 +175,8 @@ const mountElementIfVisible = () => {
   if (widgetElement.value.contains(widget.element)) {
     return
   }
+
+  widget.element.classList.add('h-full', 'w-full')
   widgetElement.value.appendChild(widget.element)
 }
 
@@ -196,11 +199,3 @@ watch(
 
 whenever(() => !canvasStore.linearMode, mountElementIfVisible)
 </script>
-
-<style scoped>
-@reference '../../../assets/css/style.css';
-
-.dom-widget > * {
-  @apply h-full w-full;
-}
-</style>

src/components/node/NodeHelpContent.vue

@@ -8,11 +8,14 @@
     <!-- Markdown fetched successfully -->
     <div
       v-else-if="!error"
-      class="markdown-content"
+      class="markdown-content overflow-visible text-sm leading-(--text-sm--line-height)"
       v-html="renderedHelpHtml"
     />
     <!-- Fallback: markdown not found or fetch error -->
-    <div v-else class="fallback-content space-y-6 text-sm">
+    <div
+      v-else
+      class="fallback-content space-y-6 text-sm leading-(--text-sm--line-height)"
+    >
       <p v-if="node.description">
         <strong>{{ $t('g.description') }}:</strong> {{ node.description }}
       </p>
@@ -22,48 +25,52 @@
           <strong>{{ $t('nodeHelpPage.inputs') }}:</strong>
         </p>
         <!-- Using plain HTML table instead of DataTable for consistent styling with markdown content -->
-        <table class="overflow-x-auto">
-          <thead>
-            <tr>
-              <th>{{ $t('g.name') }}</th>
-              <th>{{ $t('nodeHelpPage.type') }}</th>
-              <th>{{ $t('g.description') }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="input in inputList" :key="input.name">
-              <td>
-                <code>{{ input.name }}</code>
-              </td>
-              <td>{{ input.type }}</td>
-              <td>{{ input.tooltip || '-' }}</td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="overflow-x-auto">
+          <table>
+            <thead>
+              <tr>
+                <th>{{ $t('g.name') }}</th>
+                <th>{{ $t('nodeHelpPage.type') }}</th>
+                <th>{{ $t('g.description') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="input in inputList" :key="input.name">
+                <td>
+                  <code>{{ input.name }}</code>
+                </td>
+                <td>{{ input.type }}</td>
+                <td>{{ input.tooltip || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
 
       <div v-if="outputList.length">
         <p>
           <strong>{{ $t('nodeHelpPage.outputs') }}:</strong>
         </p>
-        <table class="overflow-x-auto">
-          <thead>
-            <tr>
-              <th>{{ $t('g.name') }}</th>
-              <th>{{ $t('nodeHelpPage.type') }}</th>
-              <th>{{ $t('g.description') }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="output in outputList" :key="output.name">
-              <td>
-                <code>{{ output.name }}</code>
-              </td>
-              <td>{{ output.type }}</td>
-              <td>{{ output.tooltip || '-' }}</td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="overflow-x-auto">
+          <table>
+            <thead>
+              <tr>
+                <th>{{ $t('g.name') }}</th>
+                <th>{{ $t('nodeHelpPage.type') }}</th>
+                <th>{{ $t('g.description') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="output in outputList" :key="output.name">
+                <td>
+                  <code>{{ output.name }}</code>
+                </td>
+                <td>{{ output.type }}</td>
+                <td>{{ output.tooltip || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
@@ -100,39 +107,59 @@ const outputList = computed(() =>
 </script>
 
 <style scoped>
-@reference './../../assets/css/style.css';
-
 .node-help-content :deep(:is(img, video)) {
-  @apply max-w-full h-auto block mb-4;
-}
-
-.markdown-content,
-.fallback-content {
-  @apply text-sm overflow-visible;
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-bottom: calc(var(--spacing) * 4);
 }
 
 .markdown-content :deep(h1),
 .fallback-content h1 {
-  @apply text-[22px] font-bold mt-8 mb-4 first:mt-0;
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-weight-bold);
 }
 
 .markdown-content :deep(h2),
 .fallback-content h2 {
-  @apply text-[18px] font-bold mt-8 mb-4 first:mt-0;
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-bold);
 }
 
 .markdown-content :deep(h3),
 .fallback-content h3 {
-  @apply text-[16px] font-bold mt-8 mb-4 first:mt-0;
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-bold);
 }
 
 .markdown-content :deep(h4),
+.fallback-content h4 {
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-bold);
+}
+
 .markdown-content :deep(h5),
+.fallback-content h5 {
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-bold);
+}
+
 .markdown-content :deep(h6),
-.fallback-content h4,
-.fallback-content h5,
 .fallback-content h6 {
-  @apply mt-8 mb-4 first:mt-0;
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-bold);
 }
 
 .markdown-content :deep(td),
@@ -155,7 +182,8 @@ const outputList = computed(() =>
 .markdown-content :deep(ol),
 .fallback-content ul,
 .fallback-content ol {
-  @apply pl-8 my-2;
+  margin-block: calc(var(--spacing) * 2);
+  padding-left: calc(var(--spacing) * 8);
 }
 
 .markdown-content :deep(ul ul),
@@ -166,36 +194,42 @@ const outputList = computed(() =>
 .fallback-content ol ol,
 .fallback-content ul ol,
 .fallback-content ol ul {
-  @apply pl-6 my-2;
+  margin-block: calc(var(--spacing) * 2);
+  padding-left: calc(var(--spacing) * 6);
 }
 
 .markdown-content :deep(li),
 .fallback-content li {
-  @apply my-2;
+  margin-block: calc(var(--spacing) * 2);
 }
 
 .markdown-content :deep(*:first-child),
 .fallback-content > *:first-child {
-  @apply mt-0;
+  margin-top: 0;
 }
 
 .markdown-content :deep(code),
 .fallback-content code {
   color: var(--code-text-color);
   background-color: var(--code-bg-color);
-  @apply rounded px-1.5 py-0.5;
+  border-radius: var(--radius);
+  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
 }
 
 .markdown-content :deep(table),
 .fallback-content table {
-  @apply w-full border-collapse;
+  border-collapse: collapse;
+}
+
+.fallback-content table {
+  width: 100%;
 }
 
 .markdown-content :deep(th),
 .markdown-content :deep(td),
 .fallback-content th,
 .fallback-content td {
-  @apply px-2 py-2;
+  padding: calc(var(--spacing) * 2);
 }
 
 .markdown-content :deep(tr),
@@ -215,16 +249,22 @@ const outputList = computed(() =>
 
 .markdown-content :deep(pre),
 .fallback-content pre {
-  @apply rounded p-4 my-4 overflow-x-auto;
+  margin-block: calc(var(--spacing) * 4);
+  overflow-x: auto;
+  border-radius: var(--radius);
+  padding: calc(var(--spacing) * 4);
   background-color: var(--code-block-bg-color);
 
   code {
-    @apply bg-transparent p-0;
+    background-color: transparent;
+    padding: 0;
     color: var(--p-text-color);
   }
 }
 
 .markdown-content :deep(table) {
-  @apply overflow-x-auto;
+  display: block;
+  width: 100%;
+  overflow-x: auto;
 }
 </style>

src/components/painter/WidgetPainter.vue

@@ -0,0 +1,359 @@
+<template>
+  <div
+    class="widget-expands flex h-full w-full flex-col gap-1"
+    @pointerdown.stop
+    @pointermove.stop
+    @pointerup.stop
+  >
+    <div
+      class="flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded-lg bg-node-component-surface"
+    >
+      <div class="relative max-h-full w-full" :style="canvasContainerStyle">
+        <img
+          v-if="inputImageUrl"
+          :src="inputImageUrl"
+          class="absolute inset-0 size-full"
+          draggable="false"
+          @load="handleInputImageLoad"
+          @dragstart.prevent
+        />
+        <canvas
+          ref="canvasEl"
+          class="absolute inset-0 size-full cursor-none touch-none"
+          @pointerdown="handlePointerDown"
+          @pointermove="handlePointerMove"
+          @pointerup="handlePointerUp"
+          @pointerenter="handlePointerEnter"
+          @pointerleave="handlePointerLeave"
+        />
+        <div
+          v-show="cursorVisible"
+          class="pointer-events-none absolute left-0 top-0 rounded-full border border-black/60 shadow-[0_0_0_1px_rgba(255,255,255,0.8)]"
+          :style="cursorStyle"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="isImageInputConnected"
+      class="text-center text-xs text-muted-foreground"
+    >
+      {{ canvasWidth }} x {{ canvasHeight }}
+    </div>
+
+    <div
+      ref="controlsEl"
+      :class="
+        cn(
+          'grid shrink-0 gap-x-1 gap-y-1',
+          compact ? 'grid-cols-1' : 'grid-cols-[auto_1fr]'
+        )
+      "
+    >
+      <div
+        v-if="!compact"
+        class="flex w-28 items-center truncate text-sm text-muted-foreground"
+      >
+        {{ $t('painter.tool') }}
+      </div>
+      <div
+        class="flex h-8 items-center gap-1 rounded-sm bg-component-node-widget-background p-1"
+      >
+        <Button
+          variant="textonly"
+          size="unset"
+          :class="
+            cn(
+              'flex-1 self-stretch px-2 text-xs transition-colors',
+              tool === PAINTER_TOOLS.BRUSH
+                ? 'rounded-sm bg-component-node-widget-background-selected text-base-foreground'
+                : 'text-node-text-muted hover:text-node-text'
+            )
+          "
+          @click="tool = PAINTER_TOOLS.BRUSH"
+        >
+          {{ $t('painter.brush') }}
+        </Button>
+        <Button
+          variant="textonly"
+          size="unset"
+          :class="
+            cn(
+              'flex-1 self-stretch px-2 text-xs transition-colors',
+              tool === PAINTER_TOOLS.ERASER
+                ? 'rounded-sm bg-component-node-widget-background-selected text-base-foreground'
+                : 'text-node-text-muted hover:text-node-text'
+            )
+          "
+          @click="tool = PAINTER_TOOLS.ERASER"
+        >
+          {{ $t('painter.eraser') }}
+        </Button>
+      </div>
+
+      <div
+        v-if="!compact"
+        class="flex w-28 items-center truncate text-sm text-muted-foreground"
+      >
+        {{ $t('painter.size') }}
+      </div>
+      <div
+        class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
+      >
+        <Slider
+          :model-value="[brushSize]"
+          :min="1"
+          :max="200"
+          :step="1"
+          class="flex-1"
+          @update:model-value="(v) => v?.length && (brushSize = v[0])"
+        />
+        <span class="w-8 text-center text-xs text-node-text-muted">{{
+          brushSize
+        }}</span>
+      </div>
+
+      <template v-if="tool === PAINTER_TOOLS.BRUSH">
+        <div
+          class="flex w-28 items-center truncate text-sm text-muted-foreground"
+        >
+          {{ $t('painter.color') }}
+        </div>
+        <div
+          class="flex h-8 w-full items-center gap-2 rounded-lg bg-component-node-widget-background px-4"
+        >
+          <input
+            type="color"
+            :value="brushColorDisplay"
+            class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-moz-color-swatch]:rounded-full"
+            @input="
+              (e) => (brushColorDisplay = (e.target as HTMLInputElement).value)
+            "
+          />
+          <span class="min-w-[4ch] truncate text-xs">{{
+            brushColorDisplay
+          }}</span>
+          <span class="ml-auto flex items-center text-xs text-node-text-muted">
+            <input
+              type="number"
+              :value="brushOpacityPercent"
+              min="0"
+              max="100"
+              step="1"
+              class="w-7 appearance-none border-0 bg-transparent text-right text-xs text-node-text-muted outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [-moz-appearance:textfield]"
+              @click.prevent
+              @change="
+                (e) => {
+                  const val = Math.min(
+                    100,
+                    Math.max(0, Number((e.target as HTMLInputElement).value))
+                  )
+                  brushOpacityPercent = val
+                  ;(e.target as HTMLInputElement).value = String(val)
+                }
+              "
+            />%</span
+          >
+        </div>
+
+        <div
+          class="flex w-28 items-center truncate text-sm text-muted-foreground"
+        >
+          {{ $t('painter.hardness') }}
+        </div>
+        <div
+          class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
+        >
+          <Slider
+            :model-value="[brushHardnessPercent]"
+            :min="0"
+            :max="100"
+            :step="1"
+            class="flex-1"
+            @update:model-value="
+              (v) => v?.length && (brushHardnessPercent = v[0])
+            "
+          />
+          <span class="w-8 text-center text-xs text-node-text-muted"
+            >{{ brushHardnessPercent }}%</span
+          >
+        </div>
+      </template>
+
+      <template v-if="!isImageInputConnected">
+        <div
+          class="flex w-28 items-center truncate text-sm text-muted-foreground"
+        >
+          {{ $t('painter.width') }}
+        </div>
+        <div
+          class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
+        >
+          <Slider
+            :model-value="[canvasWidth]"
+            :min="64"
+            :max="4096"
+            :step="64"
+            class="flex-1"
+            @update:model-value="(v) => v?.length && (canvasWidth = v[0])"
+          />
+          <span class="w-10 text-center text-xs text-node-text-muted">{{
+            canvasWidth
+          }}</span>
+        </div>
+
+        <div
+          class="flex w-28 items-center truncate text-sm text-muted-foreground"
+        >
+          {{ $t('painter.height') }}
+        </div>
+        <div
+          class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
+        >
+          <Slider
+            :model-value="[canvasHeight]"
+            :min="64"
+            :max="4096"
+            :step="64"
+            class="flex-1"
+            @update:model-value="(v) => v?.length && (canvasHeight = v[0])"
+          />
+          <span class="w-10 text-center text-xs text-node-text-muted">{{
+            canvasHeight
+          }}</span>
+        </div>
+
+        <div
+          class="flex w-28 items-center truncate text-sm text-muted-foreground"
+        >
+          {{ $t('painter.background') }}
+        </div>
+        <div
+          class="flex h-8 w-full items-center gap-2 rounded-lg bg-component-node-widget-background px-4"
+        >
+          <input
+            type="color"
+            :value="backgroundColorDisplay"
+            class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-moz-color-swatch]:rounded-full"
+            @input="
+              (e) =>
+                (backgroundColorDisplay = (e.target as HTMLInputElement).value)
+            "
+          />
+          <span class="min-w-[4ch] truncate text-xs">{{
+            backgroundColorDisplay
+          }}</span>
+        </div>
+      </template>
+
+      <Button
+        variant="secondary"
+        size="md"
+        :class="
+          cn(
+            'gap-2 rounded-lg border border-component-node-border bg-component-node-background text-xs text-muted-foreground hover:text-base-foreground',
+            !compact && 'col-span-2'
+          )
+        "
+        @click="handleClear"
+      >
+        <i class="icon-[lucide--undo-2]" />
+        {{ $t('painter.clear') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import { computed, useTemplateRef } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+import { PAINTER_TOOLS, usePainter } from '@/composables/painter/usePainter'
+import { toHexFromFormat } from '@/utils/colorUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+const { nodeId } = defineProps<{
+  nodeId: string
+}>()
+
+const modelValue = defineModel<string>({ default: '' })
+
+const canvasEl = useTemplateRef<HTMLCanvasElement>('canvasEl')
+const controlsEl = useTemplateRef<HTMLDivElement>('controlsEl')
+const { width: controlsWidth } = useElementSize(controlsEl)
+const compact = computed(
+  () => controlsWidth.value > 0 && controlsWidth.value < 350
+)
+
+const {
+  tool,
+  brushSize,
+  brushColor,
+  brushOpacity,
+  brushHardness,
+  backgroundColor,
+  canvasWidth,
+  canvasHeight,
+  cursorX,
+  cursorY,
+  cursorVisible,
+  displayBrushSize,
+  inputImageUrl,
+  isImageInputConnected,
+  handlePointerDown,
+  handlePointerMove,
+  handlePointerUp,
+  handlePointerEnter,
+  handlePointerLeave,
+  handleInputImageLoad,
+  handleClear
+} = usePainter(nodeId, { canvasEl, modelValue })
+
+const canvasContainerStyle = computed(() => ({
+  aspectRatio: `${canvasWidth.value} / ${canvasHeight.value}`,
+  backgroundColor: isImageInputConnected.value
+    ? undefined
+    : backgroundColor.value
+}))
+
+const cursorStyle = computed(() => {
+  const size = displayBrushSize.value
+  const x = cursorX.value - size / 2
+  const y = cursorY.value - size / 2
+  return {
+    width: `${size}px`,
+    height: `${size}px`,
+    transform: `translate(${x}px, ${y}px)`
+  }
+})
+
+const brushOpacityPercent = computed({
+  get: () => Math.round(brushOpacity.value * 100),
+  set: (val: number) => {
+    brushOpacity.value = val / 100
+  }
+})
+
+const brushHardnessPercent = computed({
+  get: () => Math.round(brushHardness.value * 100),
+  set: (val: number) => {
+    brushHardness.value = val / 100
+  }
+})
+
+const brushColorDisplay = computed({
+  get: () => toHexFromFormat(brushColor.value, 'hex'),
+  set: (val: unknown) => {
+    brushColor.value = toHexFromFormat(val, 'hex')
+  }
+})
+
+const backgroundColorDisplay = computed({
+  get: () => toHexFromFormat(backgroundColor.value, 'hex'),
+  set: (val: unknown) => {
+    backgroundColor.value = toHexFromFormat(val, 'hex')
+  }
+})
+</script>

src/components/queue/job/JobAssetsList.test.ts

@@ -0,0 +1,146 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+import type { JobListItem as ApiJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+import { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
+
+import JobAssetsList from './JobAssetsList.vue'
+
+vi.mock('vue-i18n', () => {
+  return {
+    createI18n: () => ({
+      global: {
+        t: (key: string) => key,
+        te: () => true,
+        d: (value: string) => value
+      }
+    }),
+    useI18n: () => ({
+      t: (key: string) => key
+    })
+  }
+})
+
+const createResultItem = (
+  filename: string,
+  mediaType: string = 'images'
+): ResultItemImpl => {
+  const item = new ResultItemImpl({
+    filename,
+    subfolder: '',
+    type: 'output',
+    nodeId: 'node-1',
+    mediaType
+  })
+  Object.defineProperty(item, 'url', {
+    get: () => `/api/view/${filename}`
+  })
+  return item
+}
+
+const createTaskRef = (preview?: ResultItemImpl): TaskItemImpl => {
+  const job: ApiJobListItem = {
+    id: `task-${Math.random().toString(36).slice(2)}`,
+    status: 'completed',
+    create_time: Date.now(),
+    preview_output: null,
+    outputs_count: preview ? 1 : 0,
+    priority: 0
+  }
+  const flatOutputs = preview ? [preview] : []
+  return new TaskItemImpl(job, {}, flatOutputs)
+}
+
+const buildJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({
+  id: 'job-1',
+  title: 'Job 1',
+  meta: 'meta',
+  state: 'completed',
+  taskRef: createTaskRef(createResultItem('job-1.png')),
+  ...overrides
+})
+
+const mountJobAssetsList = (jobs: JobListItem[]) => {
+  const displayedJobGroups: JobGroup[] = [
+    {
+      key: 'group-1',
+      label: 'Group 1',
+      items: jobs
+    }
+  ]
+
+  return mount(JobAssetsList, {
+    props: { displayedJobGroups }
+  })
+}
+
+describe('JobAssetsList', () => {
+  it('emits viewItem on preview-click for completed jobs with preview', async () => {
+    const job = buildJob()
+    const wrapper = mountJobAssetsList([job])
+
+    const listItem = wrapper.findComponent({ name: 'AssetsListItem' })
+    listItem.vm.$emit('preview-click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('viewItem')).toEqual([[job]])
+  })
+
+  it('emits viewItem on double-click for completed jobs with preview', async () => {
+    const job = buildJob()
+    const wrapper = mountJobAssetsList([job])
+
+    const listItem = wrapper.findComponent({ name: 'AssetsListItem' })
+    await listItem.trigger('dblclick')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('viewItem')).toEqual([[job]])
+  })
+
+  it('emits viewItem on double-click for completed video jobs without icon image', async () => {
+    const job = buildJob({
+      iconImageUrl: undefined,
+      taskRef: createTaskRef(createResultItem('job-1.webm', 'video'))
+    })
+    const wrapper = mountJobAssetsList([job])
+
+    const listItem = wrapper.findComponent({ name: 'AssetsListItem' })
+    expect(listItem.props('previewUrl')).toBe('/api/view/job-1.webm')
+    expect(listItem.props('isVideoPreview')).toBe(true)
+
+    await listItem.trigger('dblclick')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('viewItem')).toEqual([[job]])
+  })
+
+  it('emits viewItem on icon click for completed 3D jobs without preview tile', async () => {
+    const job = buildJob({
+      iconImageUrl: undefined,
+      taskRef: createTaskRef(createResultItem('job-1.glb', 'model'))
+    })
+    const wrapper = mountJobAssetsList([job])
+
+    const listItem = wrapper.findComponent({ name: 'AssetsListItem' })
+
+    await listItem.find('i').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('viewItem')).toEqual([[job]])
+  })
+
+  it('does not emit viewItem on double-click for non-completed jobs', async () => {
+    const job = buildJob({
+      state: 'running',
+      taskRef: createTaskRef(createResultItem('job-1.png'))
+    })
+    const wrapper = mountJobAssetsList([job])
+
+    const listItem = wrapper.findComponent({ name: 'AssetsListItem' })
+    await listItem.trigger('dblclick')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('viewItem')).toBeUndefined()
+  })
+})

src/components/queue/job/JobAssetsList.vue

@@ -12,7 +12,8 @@
         v-for="job in group.items"
         :key="job.id"
         class="w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover"
-        :preview-url="job.iconImageUrl"
+        :preview-url="getJobPreviewUrl(job)"
+        :is-video-preview="isVideoPreviewJob(job)"
         :preview-alt="job.title"
         :icon-name="job.iconName ?? iconForJobState(job.state)"
         :icon-class="getJobIconClass(job)"
@@ -23,6 +24,8 @@
         @mouseenter="hoveredJobId = job.id"
         @mouseleave="onJobLeave(job.id)"
         @contextmenu.prevent.stop="$emit('menu', job, $event)"
+        @dblclick.stop="emitViewItem(job)"
+        @preview-click="emitViewItem(job)"
         @click.stop
       >
         <template v-if="hoveredJobId === job.id" #actions>
@@ -78,7 +81,7 @@ import { isActiveJobState } from '@/utils/queueUtil'
 
 defineProps<{ displayedJobGroups: JobGroup[] }>()
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'cancelItem', item: JobListItem): void
   (e: 'deleteItem', item: JobListItem): void
   (e: 'menu', item: JobListItem, ev: MouseEvent): void
@@ -100,6 +103,28 @@ const isCancelable = (job: JobListItem) =>
 const isFailedDeletable = (job: JobListItem) =>
   job.showClear !== false && job.state === 'failed'
 
+const getPreviewOutput = (job: JobListItem) => job.taskRef?.previewOutput
+
+const getJobPreviewUrl = (job: JobListItem) => {
+  const preview = getPreviewOutput(job)
+  if (preview?.isImage || preview?.isVideo) {
+    return preview.url
+  }
+  return job.iconImageUrl
+}
+
+const isVideoPreviewJob = (job: JobListItem) =>
+  job.state === 'completed' && !!getPreviewOutput(job)?.isVideo
+
+const isPreviewableCompletedJob = (job: JobListItem) =>
+  job.state === 'completed' && !!getPreviewOutput(job)
+
+const emitViewItem = (job: JobListItem) => {
+  if (isPreviewableCompletedJob(job)) {
+    emit('viewItem', job)
+  }
+}
+
 const getJobIconClass = (job: JobListItem): string | undefined => {
   const iconName = job.iconName ?? iconForJobState(job.state)
   if (!job.iconImageUrl && iconName === iconForJobState('pending')) {

src/components/queue/job/JobDetailsPopover.stories.ts

@@ -131,11 +131,11 @@ export const Queued: Story = {
       const exec = useExecutionStore()
 
       const jobId = 'job-queued-1'
-      const queueIndex = 104
+      const priority = 104
 
       // Current job in pending
       queue.pendingTasks = [
-        makePendingTask(jobId, queueIndex, Date.now() - 90_000)
+        makePendingTask(jobId, priority, Date.now() - 90_000)
       ]
       // Add some other pending jobs to give context
       queue.pendingTasks.push(
@@ -179,13 +179,13 @@ export const QueuedParallel: Story = {
       const exec = useExecutionStore()
 
       const jobId = 'job-queued-parallel'
-      const queueIndex = 210
+      const priority = 210
 
       // Current job in pending with some ahead
       queue.pendingTasks = [
         makePendingTask('job-ahead-1', 200, Date.now() - 180_000),
         makePendingTask('job-ahead-2', 205, Date.now() - 150_000),
-        makePendingTask(jobId, queueIndex, Date.now() - 120_000)
+        makePendingTask(jobId, priority, Date.now() - 120_000)
       ]
 
       // Seen 2 minutes ago - set via prompt metadata above
@@ -238,9 +238,9 @@ export const Running: Story = {
       const exec = useExecutionStore()
 
       const jobId = 'job-running-1'
-      const queueIndex = 300
+      const priority = 300
       queue.runningTasks = [
-        makeRunningTask(jobId, queueIndex, Date.now() - 65_000)
+        makeRunningTask(jobId, priority, Date.now() - 65_000)
       ]
       queue.historyTasks = [
         makeHistoryTask('hist-r1', 250, 30, true),
@@ -279,10 +279,10 @@ export const QueuedZeroAheadSingleRunning: Story = {
       const exec = useExecutionStore()
 
       const jobId = 'job-queued-zero-ahead-single'
-      const queueIndex = 510
+      const priority = 510
 
       queue.pendingTasks = [
-        makePendingTask(jobId, queueIndex, Date.now() - 45_000)
+        makePendingTask(jobId, priority, Date.now() - 45_000)
       ]
 
       queue.historyTasks = [
@@ -324,10 +324,10 @@ export const QueuedZeroAheadMultiRunning: Story = {
       const exec = useExecutionStore()
 
       const jobId = 'job-queued-zero-ahead-multi'
-      const queueIndex = 520
+      const priority = 520
 
       queue.pendingTasks = [
-        makePendingTask(jobId, queueIndex, Date.now() - 20_000)
+        makePendingTask(jobId, priority, Date.now() - 20_000)
       ]
 
       queue.historyTasks = [
@@ -380,8 +380,8 @@ export const Completed: Story = {
       const queue = useQueueStore()
 
       const jobId = 'job-completed-1'
-      const queueIndex = 400
-      queue.historyTasks = [makeHistoryTask(jobId, queueIndex, 37, true)]
+      const priority = 400
+      queue.historyTasks = [makeHistoryTask(jobId, priority, 37, true)]
 
       return { args: { ...args, jobId } }
     },
@@ -401,11 +401,11 @@ export const Failed: Story = {
       const queue = useQueueStore()
 
       const jobId = 'job-failed-1'
-      const queueIndex = 410
+      const priority = 410
       queue.historyTasks = [
         makeHistoryTask(
           jobId,
-          queueIndex,
+          priority,
           12,
           false,
           'Example error: invalid inputs for node X'

src/components/queue/job/JobDetailsPopover.vue

@@ -168,14 +168,14 @@ const queuedAtValue = computed(() =>
 
 const currentQueueIndex = computed<number | null>(() => {
   const task = taskForJob.value
-  return task ? Number(task.queueIndex) : null
+  return task ? Number(task.job.priority) : null
 })
 
 const jobsAhead = computed<number | null>(() => {
   const idx = currentQueueIndex.value
   if (idx == null) return null
   const ahead = queueStore.pendingTasks.filter(
-    (t: TaskItemImpl) => Number(t.queueIndex) < idx
+    (t: TaskItemImpl) => Number(t.job.priority) < idx
   )
   return ahead.length
 })

src/components/rightSidePanel/RightSidePanel.vue

@@ -40,7 +40,8 @@ const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
 
-const { hasAnyError, allErrorExecutionIds } = storeToRefs(executionErrorStore)
+const { hasAnyError, allErrorExecutionIds, activeMissingNodeGraphIds } =
+  storeToRefs(executionErrorStore)
 
 const { findParentGroup } = useGraphHierarchy()
 
@@ -109,9 +110,21 @@ const hasContainerInternalError = computed(() => {
   })
 })
 
+const hasMissingNodeSelected = computed(
+  () =>
+    hasSelection.value &&
+    selectedNodes.value.some((node) =>
+      activeMissingNodeGraphIds.value.has(String(node.id))
+    )
+)
+
 const hasRelevantErrors = computed(() => {
   if (!hasSelection.value) return hasAnyError.value
-  return hasDirectNodeError.value || hasContainerInternalError.value
+  return (
+    hasDirectNodeError.value ||
+    hasContainerInternalError.value ||
+    hasMissingNodeSelected.value
+  )
 })
 
 const tabs = computed<RightSidePanelTabList>(() => {

src/components/rightSidePanel/errors/ErrorNodeCard.vue

@@ -17,24 +17,26 @@
       >
         {{ card.nodeTitle }}
       </span>
-      <Button
-        v-if="card.isSubgraphNode"
-        variant="secondary"
-        size="sm"
-        class="rounded-lg text-sm shrink-0"
-        @click.stop="handleEnterSubgraph"
-      >
-        {{ t('rightSidePanel.enterSubgraph') }}
-      </Button>
-      <Button
-        variant="textonly"
-        size="icon-sm"
-        class="size-7 text-muted-foreground hover:text-base-foreground shrink-0"
-        :aria-label="t('rightSidePanel.locateNode')"
-        @click.stop="handleLocateNode"
-      >
-        <i class="icon-[lucide--locate] size-3.5" />
-      </Button>
+      <div class="flex items-center shrink-0">
+        <Button
+          v-if="card.isSubgraphNode"
+          variant="secondary"
+          size="sm"
+          class="rounded-lg text-sm shrink-0 h-8"
+          @click.stop="handleEnterSubgraph"
+        >
+          {{ t('rightSidePanel.enterSubgraph') }}
+        </Button>
+        <Button
+          variant="textonly"
+          size="icon-sm"
+          class="size-8 text-muted-foreground hover:text-base-foreground shrink-0"
+          :aria-label="t('rightSidePanel.locateNode')"
+          @click.stop="handleLocateNode"
+        >
+          <i class="icon-[lucide--locate] size-4" />
+        </Button>
+      </div>
     </div>
 
     <!-- Multiple Errors within one Card -->

src/components/rightSidePanel/errors/MissingNodeCard.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="px-4 pb-2">
+    <!-- Sub-label: cloud or OSS message shown above all pack groups -->
+    <p class="m-0 pb-5 text-sm text-muted-foreground leading-relaxed">
+      {{
+        isCloud
+          ? t('rightSidePanel.missingNodePacks.cloudMessage')
+          : t('rightSidePanel.missingNodePacks.ossMessage')
+      }}
+    </p>
+    <MissingPackGroupRow
+      v-for="group in missingPackGroups"
+      :key="group.packId ?? '__unknown__'"
+      :group="group"
+      :show-info-button="showInfoButton"
+      :show-node-id-badge="showNodeIdBadge"
+      @locate-node="emit('locateNode', $event)"
+      @open-manager-info="emit('openManagerInfo', $event)"
+    />
+  </div>
+
+  <!-- Apply Changes: shown when manager enabled and at least one pack install succeeded -->
+  <div v-if="shouldShowManagerButtons" class="px-4">
+    <Button
+      v-if="hasInstalledPacksPendingRestart"
+      variant="primary"
+      :disabled="isRestarting"
+      class="w-full h-9 justify-center gap-2 text-sm font-semibold mt-2"
+      @click="applyChanges()"
+    >
+      <DotSpinner v-if="isRestarting" duration="1s" :size="14" />
+      <i v-else class="icon-[lucide--refresh-cw] size-4 shrink-0" />
+      <span class="truncate min-w-0">{{
+        t('rightSidePanel.missingNodePacks.applyChanges')
+      }}</span>
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Button from '@/components/ui/button/Button.vue'
+import DotSpinner from '@/components/common/DotSpinner.vue'
+import { useApplyChanges } from '@/workbench/extensions/manager/composables/useApplyChanges'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { isCloud } from '@/platform/distribution/types'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
+import MissingPackGroupRow from '@/components/rightSidePanel/errors/MissingPackGroupRow.vue'
+
+const props = defineProps<{
+  showInfoButton: boolean
+  showNodeIdBadge: boolean
+  missingPackGroups: MissingPackGroup[]
+}>()
+
+const emit = defineEmits<{
+  locateNode: [nodeId: string]
+  openManagerInfo: [packId: string]
+}>()
+
+const { t } = useI18n()
+
+const comfyManagerStore = useComfyManagerStore()
+const { isRestarting, applyChanges } = useApplyChanges()
+const { shouldShowManagerButtons } = useManagerState()
+
+/**
+ * Show Apply Changes when any pack from the error group is already installed
+ * on disk but ComfyUI hasn't restarted yet to load it.
+ * This is server-state based → persists across browser refreshes.
+ */
+const hasInstalledPacksPendingRestart = computed(() =>
+  props.missingPackGroups.some(
+    (g) => g.packId !== null && comfyManagerStore.isPackInstalled(g.packId)
+  )
+)
+</script>

src/components/rightSidePanel/errors/MissingPackGroupRow.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="flex flex-col w-full mb-2">
+    <!-- Pack header row: pack name + info + chevron -->
+    <div class="flex h-8 items-center w-full">
+      <!-- Warning icon for unknown packs -->
+      <i
+        v-if="group.packId === null && !group.isResolving"
+        class="icon-[lucide--triangle-alert] size-4 text-warning-background shrink-0 mr-1.5"
+      />
+      <p
+        class="flex-1 min-w-0 text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap"
+        :class="
+          group.packId === null && !group.isResolving
+            ? 'text-warning-background'
+            : 'text-foreground'
+        "
+      >
+        <span v-if="group.isResolving" class="text-muted-foreground italic">
+          {{ t('g.loading') }}...
+        </span>
+        <span v-else>
+          {{
+            `${group.packId ?? t('rightSidePanel.missingNodePacks.unknownPack')} (${group.nodeTypes.length})`
+          }}
+        </span>
+      </p>
+      <Button
+        v-if="showInfoButton && group.packId !== null"
+        variant="textonly"
+        size="icon-sm"
+        class="size-8 text-muted-foreground hover:text-base-foreground shrink-0"
+        :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
+        @click="emit('openManagerInfo', group.packId ?? '')"
+      >
+        <i class="icon-[lucide--info] size-4" />
+      </Button>
+      <Button
+        variant="textonly"
+        size="icon-sm"
+        :class="
+          cn(
+            'size-8 shrink-0 transition-transform duration-200 hover:bg-transparent',
+            { 'rotate-180': expanded }
+          )
+        "
+        :aria-label="
+          expanded
+            ? t('rightSidePanel.missingNodePacks.collapse')
+            : t('rightSidePanel.missingNodePacks.expand')
+        "
+        @click="toggleExpand"
+      >
+        <i
+          class="icon-[lucide--chevron-down] size-4 text-muted-foreground group-hover:text-base-foreground"
+        />
+      </Button>
+    </div>
+
+    <!-- Sub-labels: individual node instances, each with their own Locate button -->
+    <TransitionCollapse>
+      <div
+        v-if="expanded"
+        class="flex flex-col gap-0.5 pl-2 mb-1 overflow-hidden"
+      >
+        <div
+          v-for="nodeType in group.nodeTypes"
+          :key="getKey(nodeType)"
+          class="flex h-7 items-center"
+        >
+          <span
+            v-if="
+              showNodeIdBadge &&
+              typeof nodeType !== 'string' &&
+              nodeType.nodeId != null
+            "
+            class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 text-xs font-mono text-muted-foreground font-bold mr-1"
+          >
+            #{{ nodeType.nodeId }}
+          </span>
+          <p class="flex-1 min-w-0 text-xs text-muted-foreground truncate">
+            {{ getLabel(nodeType) }}
+          </p>
+          <Button
+            v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
+            variant="textonly"
+            size="icon-sm"
+            class="size-6 text-muted-foreground hover:text-base-foreground shrink-0 mr-1"
+            :aria-label="t('rightSidePanel.locateNode')"
+            @click="handleLocateNode(nodeType)"
+          >
+            <i class="icon-[lucide--locate] size-3" />
+          </Button>
+        </div>
+      </div>
+    </TransitionCollapse>
+
+    <!-- Install button: shown when manager enabled, registry knows the pack or it's already installed -->
+    <div
+      v-if="
+        shouldShowManagerButtons &&
+        group.packId !== null &&
+        (nodePack || comfyManagerStore.isPackInstalled(group.packId))
+      "
+      class="flex items-start w-full pt-1 pb-1"
+    >
+      <Button
+        variant="secondary"
+        size="md"
+        class="flex flex-1 w-full"
+        :disabled="
+          comfyManagerStore.isPackInstalled(group.packId) || isInstalling
+        "
+        @click="handlePackInstallClick"
+      >
+        <DotSpinner
+          v-if="isInstalling"
+          duration="1s"
+          :size="12"
+          class="mr-1.5 shrink-0"
+        />
+        <i
+          v-else-if="comfyManagerStore.isPackInstalled(group.packId)"
+          class="icon-[lucide--check] size-4 text-foreground shrink-0 mr-1"
+        />
+        <i
+          v-else
+          class="icon-[lucide--download] size-4 text-foreground shrink-0 mr-1"
+        />
+        <span class="text-sm text-foreground truncate min-w-0">
+          {{
+            isInstalling
+              ? t('rightSidePanel.missingNodePacks.installing')
+              : comfyManagerStore.isPackInstalled(group.packId)
+                ? t('rightSidePanel.missingNodePacks.installed')
+                : t('rightSidePanel.missingNodePacks.installNodePack')
+          }}
+        </span>
+      </Button>
+    </div>
+
+    <!-- Registry still loading: packId known but result not yet available -->
+    <div
+      v-else-if="group.packId !== null && shouldShowManagerButtons && isLoading"
+      class="flex items-start w-full pt-1 pb-1"
+    >
+      <div
+        class="flex flex-1 h-8 items-center justify-center overflow-hidden p-2 rounded-lg min-w-0 bg-secondary-background opacity-60 cursor-not-allowed select-none"
+      >
+        <DotSpinner duration="1s" :size="12" class="mr-1.5 shrink-0" />
+        <span class="text-sm text-foreground truncate min-w-0">
+          {{ t('g.loading') }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Search in Manager: fetch done but pack not found in registry -->
+    <div
+      v-else-if="group.packId !== null && shouldShowManagerButtons"
+      class="flex items-start w-full pt-1 pb-1"
+    >
+      <Button
+        variant="secondary"
+        size="md"
+        class="flex flex-1 w-full"
+        @click="
+          openManager({
+            initialTab: ManagerTab.All,
+            initialPackId: group.packId!
+          })
+        "
+      >
+        <i class="icon-[lucide--search] size-4 text-foreground shrink-0 mr-1" />
+        <span class="text-sm text-foreground truncate min-w-0">
+          {{ t('rightSidePanel.missingNodePacks.searchInManager') }}
+        </span>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { cn } from '@/utils/tailwindUtil'
+import { useI18n } from 'vue-i18n'
+import Button from '@/components/ui/button/Button.vue'
+import DotSpinner from '@/components/common/DotSpinner.vue'
+import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { usePackInstall } from '@/workbench/extensions/manager/composables/nodePack/usePackInstall'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+import type { MissingNodeType } from '@/types/comfy'
+import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
+
+const props = defineProps<{
+  group: MissingPackGroup
+  showInfoButton: boolean
+  showNodeIdBadge: boolean
+}>()
+
+const emit = defineEmits<{
+  locateNode: [nodeId: string]
+  openManagerInfo: [packId: string]
+}>()
+
+const { t } = useI18n()
+
+const { missingNodePacks, isLoading } = useMissingNodes()
+const comfyManagerStore = useComfyManagerStore()
+const { shouldShowManagerButtons, openManager } = useManagerState()
+
+const nodePack = computed(() => {
+  if (!props.group.packId) return null
+  return missingNodePacks.value.find((p) => p.id === props.group.packId) ?? null
+})
+
+const { isInstalling, installAllPacks } = usePackInstall(() =>
+  nodePack.value ? [nodePack.value] : []
+)
+
+function handlePackInstallClick() {
+  if (!props.group.packId) return
+  if (!comfyManagerStore.isPackInstalled(props.group.packId)) {
+    void installAllPacks()
+  }
+}
+
+const expanded = ref(false)
+
+function toggleExpand() {
+  expanded.value = !expanded.value
+}
+
+function getKey(nodeType: MissingNodeType): string {
+  if (typeof nodeType === 'string') return nodeType
+  return nodeType.nodeId != null ? String(nodeType.nodeId) : nodeType.type
+}
+
+function getLabel(nodeType: MissingNodeType): string {
+  return typeof nodeType === 'string' ? nodeType : nodeType.type
+}
+
+function handleLocateNode(nodeType: MissingNodeType) {
+  if (typeof nodeType === 'string') return
+  if (nodeType.nodeId != null) {
+    emit('locateNode', String(nodeType.nodeId))
+  }
+}
+</script>

src/components/rightSidePanel/errors/SwapNodeGroupRow.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="flex flex-col w-full mb-4">
+    <!-- Type header row: type name + chevron -->
+    <div class="flex h-8 items-center w-full">
+      <p
+        class="flex-1 min-w-0 text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap text-foreground"
+      >
+        {{ `${group.type} (${group.nodeTypes.length})` }}
+      </p>
+
+      <Button
+        variant="textonly"
+        size="icon-sm"
+        :class="
+          cn(
+            'size-8 shrink-0 transition-transform duration-200 hover:bg-transparent',
+            { 'rotate-180': expanded }
+          )
+        "
+        :aria-label="
+          expanded
+            ? t('rightSidePanel.missingNodePacks.collapse', 'Collapse')
+            : t('rightSidePanel.missingNodePacks.expand', 'Expand')
+        "
+        @click="toggleExpand"
+      >
+        <i
+          class="icon-[lucide--chevron-down] size-4 text-muted-foreground group-hover:text-base-foreground"
+        />
+      </Button>
+    </div>
+
+    <!-- Sub-labels: individual node instances, each with their own Locate button -->
+    <TransitionCollapse>
+      <div
+        v-if="expanded"
+        class="flex flex-col gap-0.5 pl-2 mb-2 overflow-hidden"
+      >
+        <div
+          v-for="nodeType in group.nodeTypes"
+          :key="getKey(nodeType)"
+          class="flex h-7 items-center"
+        >
+          <span
+            v-if="
+              showNodeIdBadge &&
+              typeof nodeType !== 'string' &&
+              nodeType.nodeId != null
+            "
+            class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 text-xs font-mono text-muted-foreground font-bold mr-1"
+          >
+            #{{ nodeType.nodeId }}
+          </span>
+          <p class="flex-1 min-w-0 text-xs text-muted-foreground truncate">
+            {{ getLabel(nodeType) }}
+          </p>
+          <Button
+            v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
+            variant="textonly"
+            size="icon-sm"
+            class="size-6 text-muted-foreground hover:text-base-foreground shrink-0 mr-1"
+            :aria-label="t('rightSidePanel.locateNode', 'Locate Node')"
+            @click="handleLocateNode(nodeType)"
+          >
+            <i class="icon-[lucide--locate] size-3" />
+          </Button>
+        </div>
+      </div>
+    </TransitionCollapse>
+
+    <!-- Description rows: what it is replaced by -->
+    <div class="flex flex-col text-[13px] mb-2 mt-1 px-1 gap-0.5">
+      <span class="text-muted-foreground">{{
+        t('nodeReplacement.willBeReplacedBy', 'This node will be replaced by:')
+      }}</span>
+      <span class="font-bold text-foreground">{{
+        group.newNodeId ?? t('nodeReplacement.unknownNode', 'Unknown')
+      }}</span>
+    </div>
+
+    <!-- Replace Action Button -->
+    <div class="flex items-start w-full pt-1 pb-1">
+      <Button
+        variant="secondary"
+        size="md"
+        class="flex flex-1 w-full"
+        @click="handleReplaceNode"
+      >
+        <i class="icon-[lucide--repeat] size-4 text-foreground shrink-0 mr-1" />
+        <span class="text-sm text-foreground truncate min-w-0">
+          {{ t('nodeReplacement.replaceNode', 'Replace Node') }}
+        </span>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { cn } from '@/utils/tailwindUtil'
+import { useI18n } from 'vue-i18n'
+import Button from '@/components/ui/button/Button.vue'
+import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
+import type { MissingNodeType } from '@/types/comfy'
+import type { SwapNodeGroup } from './useErrorGroups'
+import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+
+const props = defineProps<{
+  group: SwapNodeGroup
+  showNodeIdBadge: boolean
+}>()
+
+const emit = defineEmits<{
+  'locate-node': [nodeId: string]
+}>()
+
+const { t } = useI18n()
+const { replaceNodesInPlace } = useNodeReplacement()
+const executionErrorStore = useExecutionErrorStore()
+
+const expanded = ref(false)
+
+function toggleExpand() {
+  expanded.value = !expanded.value
+}
+
+function getKey(nodeType: MissingNodeType): string {
+  if (typeof nodeType === 'string') return nodeType
+  return nodeType.nodeId != null ? String(nodeType.nodeId) : nodeType.type
+}
+
+function getLabel(nodeType: MissingNodeType): string {
+  return typeof nodeType === 'string' ? nodeType : nodeType.type
+}
+
+function handleLocateNode(nodeType: MissingNodeType) {
+  if (typeof nodeType === 'string') return
+  if (nodeType.nodeId != null) {
+    emit('locate-node', String(nodeType.nodeId))
+  }
+}
+
+function handleReplaceNode() {
+  const replaced = replaceNodesInPlace(props.group.nodeTypes)
+  if (replaced.length > 0) {
+    executionErrorStore.removeMissingNodesByType([props.group.type])
+  }
+}
+</script>

src/components/rightSidePanel/errors/SwapNodesCard.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="px-4 pb-2 mt-2">
+    <!-- Sub-label: guidance message shown above all swap groups -->
+    <p class="m-0 pb-5 text-sm text-muted-foreground leading-relaxed">
+      {{
+        t(
+          'nodeReplacement.swapNodesGuide',
+          'The following nodes can be automatically replaced with compatible alternatives.'
+        )
+      }}
+    </p>
+    <!-- Group Rows -->
+    <SwapNodeGroupRow
+      v-for="group in swapNodeGroups"
+      :key="group.type"
+      :group="group"
+      :show-node-id-badge="showNodeIdBadge"
+      @locate-node="emit('locate-node', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { SwapNodeGroup } from './useErrorGroups'
+import SwapNodeGroupRow from './SwapNodeGroupRow.vue'
+
+const { t } = useI18n()
+
+const { swapNodeGroups, showNodeIdBadge } = defineProps<{
+  swapNodeGroups: SwapNodeGroup[]
+  showNodeIdBadge: boolean
+}>()
+
+const emit = defineEmits<{
+  'locate-node': [nodeId: string]
+}>()
+</script>

src/components/rightSidePanel/errors/TabErrors.test.ts

@@ -18,7 +18,8 @@ vi.mock('@/scripts/app', () => ({
 vi.mock('@/utils/graphTraversalUtil', () => ({
   getNodeByExecutionId: vi.fn(),
   getRootParentNode: vi.fn(() => null),
-  forEachNode: vi.fn()
+  forEachNode: vi.fn(),
+  mapAllNodes: vi.fn(() => [])
 }))
 
 vi.mock('@/composables/useCopyToClipboard', () => ({

src/components/rightSidePanel/errors/TabErrors.vue

@@ -27,6 +27,11 @@
           :key="group.title"
           :collapse="collapseState[group.title] ?? false"
           class="border-b border-interface-stroke"
+          :size="
+            group.type === 'missing_node' || group.type === 'swap_nodes'
+              ? 'lg'
+              : 'default'
+          "
           @update:collapse="collapseState[group.title] = $event"
         >
           <template #label>
@@ -36,20 +41,78 @@
                   class="icon-[lucide--octagon-alert] size-4 text-destructive-background-hover shrink-0"
                 />
                 <span class="text-destructive-background-hover truncate">
-                  {{ group.title }}
+                  {{
+                    group.type === 'missing_node'
+                      ? `${group.title} (${missingPackGroups.length})`
+                      : group.type === 'swap_nodes'
+                        ? `${group.title} (${swapNodeGroups.length})`
+                        : group.title
+                  }}
                 </span>
                 <span
-                  v-if="group.cards.length > 1"
+                  v-if="group.type === 'execution' && group.cards.length > 1"
                   class="text-destructive-background-hover"
                 >
                   ({{ group.cards.length }})
                 </span>
               </span>
+              <Button
+                v-if="
+                  group.type === 'missing_node' &&
+                  missingNodePacks.length > 0 &&
+                  shouldShowInstallButton
+                "
+                variant="secondary"
+                size="sm"
+                class="shrink-0 mr-2 h-8 rounded-lg text-sm"
+                :disabled="isInstallingAll"
+                @click.stop="installAll"
+              >
+                <DotSpinner v-if="isInstallingAll" duration="1s" :size="12" />
+                {{
+                  isInstallingAll
+                    ? t('rightSidePanel.missingNodePacks.installing')
+                    : t('rightSidePanel.missingNodePacks.installAll')
+                }}
+              </Button>
+              <Button
+                v-else-if="group.type === 'swap_nodes'"
+                v-tooltip.top="
+                  t(
+                    'nodeReplacement.replaceAllWarning',
+                    'Replaces all available nodes in this group.'
+                  )
+                "
+                variant="secondary"
+                size="sm"
+                class="shrink-0 mr-2 h-8 rounded-lg text-sm"
+                @click.stop="handleReplaceAll()"
+              >
+                {{ t('nodeReplacement.replaceAll', 'Replace All') }}
+              </Button>
             </div>
           </template>
 
-          <!-- Cards in Group (default slot) -->
-          <div class="px-4 space-y-3">
+          <!-- Missing Node Packs -->
+          <MissingNodeCard
+            v-if="group.type === 'missing_node'"
+            :show-info-button="shouldShowManagerButtons"
+            :show-node-id-badge="showNodeIdBadge"
+            :missing-pack-groups="missingPackGroups"
+            @locate-node="handleLocateMissingNode"
+            @open-manager-info="handleOpenManagerInfo"
+          />
+
+          <!-- Swap Nodes -->
+          <SwapNodesCard
+            v-else-if="group.type === 'swap_nodes'"
+            :swap-node-groups="swapNodeGroups"
+            :show-node-id-badge="showNodeIdBadge"
+            @locate-node="handleLocateMissingNode"
+          />
+
+          <!-- Execution Errors -->
+          <div v-else-if="group.type === 'execution'" class="px-4 space-y-3">
             <ErrorNodeCard
               v-for="card in group.cards"
               :key="card.id"
@@ -108,13 +171,22 @@ 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'
 import { NodeBadgeMode } from '@/types/nodeSource'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
 import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
 import ErrorNodeCard from './ErrorNodeCard.vue'
+import MissingNodeCard from './MissingNodeCard.vue'
+import SwapNodesCard from './SwapNodesCard.vue'
 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 { useErrorGroups } from './useErrorGroups'
+import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 
 const { t } = useI18n()
 const { copyToClipboard } = useCopyToClipboard()
@@ -122,6 +194,13 @@ const { focusNode, enterSubgraph } = useFocusNode()
 const { staticUrls } = useExternalLink()
 const settingStore = useSettingStore()
 const rightSidePanelStore = useRightSidePanelStore()
+const { shouldShowManagerButtons, shouldShowInstallButton, openManager } =
+  useManagerState()
+const { missingNodePacks } = useMissingNodes()
+const { isInstalling: isInstallingAll, installAllPacks: installAll } =
+  usePackInstall(() => missingNodePacks.value)
+const { replaceNodesInPlace } = useNodeReplacement()
+const executionErrorStore = useExecutionErrorStore()
 
 const searchQuery = ref('')
 
@@ -136,7 +215,10 @@ const {
   filteredGroups,
   collapseState,
   isSingleNodeSelected,
-  errorNodeCache
+  errorNodeCache,
+  missingNodeCache,
+  missingPackGroups,
+  swapNodeGroups
 } = useErrorGroups(searchQuery, t)
 
 /**
@@ -151,11 +233,13 @@ watch(
     if (!graphNodeId) return
     const prefix = `${graphNodeId}:`
     for (const group of allErrorGroups.value) {
-      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)
+        )
       collapseState[group.title] = !hasMatch
     }
     rightSidePanelStore.focusedErrorNodeId = null
@@ -167,6 +251,27 @@ function handleLocateNode(nodeId: string) {
   focusNode(nodeId, errorNodeCache.value)
 }
 
+function handleLocateMissingNode(nodeId: string) {
+  focusNode(nodeId, missingNodeCache.value)
+}
+
+function handleOpenManagerInfo(packId: string) {
+  const isKnownToRegistry = missingNodePacks.value.some((p) => p.id === packId)
+  if (isKnownToRegistry) {
+    openManager({ initialTab: ManagerTab.Missing, initialPackId: packId })
+  } else {
+    openManager({ initialTab: ManagerTab.All, initialPackId: packId })
+  }
+}
+
+function handleReplaceAll() {
+  const allNodeTypes = swapNodeGroups.value.flatMap((g) => g.nodeTypes)
+  const replaced = replaceNodesInPlace(allNodeTypes)
+  if (replaced.length > 0) {
+    executionErrorStore.removeMissingNodesByType(replaced)
+  }
+}
+
 function handleEnterSubgraph(nodeId: string) {
   enterSubgraph(nodeId, errorNodeCache.value)
 }

src/components/rightSidePanel/errors/types.ts

@@ -14,8 +14,12 @@ export interface ErrorCardData {
   errors: ErrorItem[]
 }
 
-export interface ErrorGroup {
-  title: string
-  cards: ErrorCardData[]
-  priority: number
-}
+export type ErrorGroup =
+  | {
+      type: 'execution'
+      title: string
+      cards: ErrorCardData[]
+      priority: number
+    }
+  | { type: 'missing_node'; title: string; priority: number }
+  | { type: 'swap_nodes'; title: string; priority: number }

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -1,11 +1,11 @@
-import { computed, reactive } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-
 import { app } from '@/scripts/app'
 import { isCloud } from '@/platform/distribution/types'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
@@ -20,6 +20,7 @@ import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
 import { isLGraphNode } from '@/utils/litegraphUtil'
 import { isGroupNode } from '@/utils/executableGroupNodeDto'
 import { st } from '@/i18n'
+import type { MissingNodeType } from '@/types/comfy'
 import type { ErrorCardData, ErrorGroup, ErrorItem } from './types'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { isNodeExecutionId } from '@/types/nodeIdentification'
@@ -32,7 +33,23 @@ const KNOWN_PROMPT_ERROR_TYPES = new Set([
   'server_error'
 ])
 
+/** Sentinel: distinguishes "fetch in-flight" from "fetch done, pack not found (null)". */
+const RESOLVING = '__RESOLVING__'
+
+export interface MissingPackGroup {
+  packId: string | null
+  nodeTypes: MissingNodeType[]
+  isResolving: boolean
+}
+
+export interface SwapNodeGroup {
+  type: string
+  newNodeId: string | undefined
+  nodeTypes: MissingNodeType[]
+}
+
 interface GroupEntry {
+  type: 'execution'
   priority: number
   cards: Map<string, ErrorCardData>
 }
@@ -76,7 +93,7 @@ function getOrCreateGroup(
 ): Map<string, ErrorCardData> {
   let entry = groupsMap.get(title)
   if (!entry) {
-    entry = { priority, cards: new Map() }
+    entry = { type: 'execution', priority, cards: new Map() }
     groupsMap.set(title, entry)
   }
   return entry.cards
@@ -137,6 +154,7 @@ function addCardErrorToGroup(
 function toSortedGroups(groupsMap: Map<string, GroupEntry>): ErrorGroup[] {
   return Array.from(groupsMap.entries())
     .map(([title, groupData]) => ({
+      type: 'execution' as const,
       title,
       cards: Array.from(groupData.cards.values()),
       priority: groupData.priority
@@ -153,6 +171,7 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
   const searchableList: ErrorSearchItem[] = []
   for (let gi = 0; gi < groups.length; gi++) {
     const group = groups[gi]
+    if (group.type !== 'execution') continue
     for (let ci = 0; ci < group.cards.length; ci++) {
       const card = group.cards[ci]
       searchableList.push({
@@ -160,8 +179,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(' ')
       })
     }
   }
@@ -184,11 +207,16 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
   )
 
   return groups
-    .map((group, gi) => ({
-      ...group,
-      cards: group.cards.filter((_, ci) => matchedCardKeys.has(`${gi}:${ci}`))
-    }))
-    .filter((group) => group.cards.length > 0)
+    .map((group, gi) => {
+      if (group.type !== 'execution') return group
+      return {
+        ...group,
+        cards: group.cards.filter((_: ErrorCardData, ci: number) =>
+          matchedCardKeys.has(`${gi}:${ci}`)
+        )
+      }
+    })
+    .filter((group) => group.type !== 'execution' || group.cards.length > 0)
 }
 
 export function useErrorGroups(
@@ -197,6 +225,7 @@ export function useErrorGroups(
 ) {
   const executionErrorStore = useExecutionErrorStore()
   const canvasStore = useCanvasStore()
+  const { inferPackFromNodeName } = useComfyRegistryStore()
   const collapseState = reactive<Record<string, boolean>>({})
 
   const selectedNodeInfo = computed(() => {
@@ -237,6 +266,19 @@ export function useErrorGroups(
     return map
   })
 
+  const missingNodeCache = computed(() => {
+    const map = new Map<string, LGraphNode>()
+    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    for (const nodeType of nodeTypes) {
+      if (typeof nodeType === 'string') continue
+      if (nodeType.nodeId == null) continue
+      const nodeId = String(nodeType.nodeId)
+      const node = getNodeByExecutionId(app.rootGraph, nodeId)
+      if (node) map.set(nodeId, node)
+    }
+    return map
+  })
+
   function isErrorInSelection(executionNodeId: string): boolean {
     const nodeIds = selectedNodeInfo.value.nodeIds
     if (!nodeIds) return true
@@ -343,6 +385,173 @@ export function useErrorGroups(
     )
   }
 
+  // Async pack-ID resolution for missing node types that lack a cnrId
+  const asyncResolvedIds = ref<Map<string, string | null>>(new Map())
+
+  const pendingTypes = computed(() =>
+    (executionErrorStore.missingNodesError?.nodeTypes ?? []).filter(
+      (n): n is Exclude<MissingNodeType, string> =>
+        typeof n !== 'string' && !n.cnrId
+    )
+  )
+
+  watch(
+    pendingTypes,
+    async (pending, _, onCleanup) => {
+      const toResolve = pending.filter(
+        (n) => asyncResolvedIds.value.get(n.type) === undefined
+      )
+      if (!toResolve.length) return
+
+      const resolvingTypes = toResolve.map((n) => n.type)
+      let cancelled = false
+      onCleanup(() => {
+        cancelled = true
+        const next = new Map(asyncResolvedIds.value)
+        for (const type of resolvingTypes) {
+          if (next.get(type) === RESOLVING) next.delete(type)
+        }
+        asyncResolvedIds.value = next
+      })
+
+      const updated = new Map(asyncResolvedIds.value)
+      for (const type of resolvingTypes) updated.set(type, RESOLVING)
+      asyncResolvedIds.value = updated
+
+      const results = await Promise.allSettled(
+        toResolve.map(async (n) => ({
+          type: n.type,
+          packId: (await inferPackFromNodeName.call(n.type))?.id ?? null
+        }))
+      )
+      if (cancelled) return
+
+      const final = new Map(asyncResolvedIds.value)
+      for (const r of results) {
+        if (r.status === 'fulfilled') {
+          final.set(r.value.type, r.value.packId)
+        }
+      }
+      // Clear any remaining RESOLVING markers for failed lookups
+      for (const type of resolvingTypes) {
+        if (final.get(type) === RESOLVING) final.set(type, null)
+      }
+      asyncResolvedIds.value = final
+    },
+    { immediate: true }
+  )
+
+  const missingPackGroups = computed<MissingPackGroup[]>(() => {
+    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    const map = new Map<
+      string | null,
+      { nodeTypes: MissingNodeType[]; isResolving: boolean }
+    >()
+    const resolvingKeys = new Set<string | null>()
+
+    for (const nodeType of nodeTypes) {
+      if (typeof nodeType !== 'string' && nodeType.isReplaceable) continue
+
+      let packId: string | null
+
+      if (typeof nodeType === 'string') {
+        packId = null
+      } else if (nodeType.cnrId) {
+        packId = nodeType.cnrId
+      } else {
+        const resolved = asyncResolvedIds.value.get(nodeType.type)
+        if (resolved === undefined || resolved === RESOLVING) {
+          packId = null
+          resolvingKeys.add(null)
+        } else {
+          packId = resolved
+        }
+      }
+
+      const existing = map.get(packId)
+      if (existing) {
+        existing.nodeTypes.push(nodeType)
+      } else {
+        map.set(packId, { nodeTypes: [nodeType], isResolving: false })
+      }
+    }
+
+    for (const key of resolvingKeys) {
+      const group = map.get(key)
+      if (group) group.isResolving = true
+    }
+
+    return Array.from(map.entries())
+      .sort(([packIdA], [packIdB]) => {
+        // null (Unknown Pack) always goes last
+        if (packIdA === null) return 1
+        if (packIdB === null) return -1
+        return packIdA.localeCompare(packIdB)
+      })
+      .map(([packId, { nodeTypes, isResolving }]) => ({
+        packId,
+        nodeTypes: [...nodeTypes].sort((a, b) => {
+          const typeA = typeof a === 'string' ? a : a.type
+          const typeB = typeof b === 'string' ? b : b.type
+          const typeCmp = typeA.localeCompare(typeB)
+          if (typeCmp !== 0) return typeCmp
+          const idA = typeof a === 'string' ? '' : String(a.nodeId ?? '')
+          const idB = typeof b === 'string' ? '' : String(b.nodeId ?? '')
+          return idA.localeCompare(idB, undefined, { numeric: true })
+        }),
+        isResolving
+      }))
+  })
+
+  const swapNodeGroups = computed<SwapNodeGroup[]>(() => {
+    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    const map = new Map<string, SwapNodeGroup>()
+
+    for (const nodeType of nodeTypes) {
+      if (typeof nodeType === 'string' || !nodeType.isReplaceable) continue
+
+      const typeName = nodeType.type
+      const existing = map.get(typeName)
+      if (existing) {
+        existing.nodeTypes.push(nodeType)
+      } else {
+        map.set(typeName, {
+          type: typeName,
+          newNodeId: nodeType.replacement?.new_node_id,
+          nodeTypes: [nodeType]
+        })
+      }
+    }
+
+    return Array.from(map.values()).sort((a, b) => a.type.localeCompare(b.type))
+  })
+
+  /** Builds an ErrorGroup from missingNodesError. Returns [] when none present. */
+  function buildMissingNodeGroups(): ErrorGroup[] {
+    const error = executionErrorStore.missingNodesError
+    if (!error) return []
+
+    const groups: ErrorGroup[] = []
+
+    if (swapNodeGroups.value.length > 0) {
+      groups.push({
+        type: 'swap_nodes' as const,
+        title: st('nodeReplacement.swapNodesTitle', 'Swap Nodes'),
+        priority: 0
+      })
+    }
+
+    if (missingPackGroups.value.length > 0) {
+      groups.push({
+        type: 'missing_node' as const,
+        title: error.message,
+        priority: 1
+      })
+    }
+
+    return groups.sort((a, b) => a.priority - b.priority)
+  }
+
   const allErrorGroups = computed<ErrorGroup[]>(() => {
     const groupsMap = new Map<string, GroupEntry>()
 
@@ -350,7 +559,7 @@ export function useErrorGroups(
     processNodeErrors(groupsMap)
     processExecutionError(groupsMap)
 
-    return toSortedGroups(groupsMap)
+    return [...buildMissingNodeGroups(), ...toSortedGroups(groupsMap)]
   })
 
   const tabErrorGroups = computed<ErrorGroup[]>(() => {
@@ -360,9 +569,11 @@ export function useErrorGroups(
     processNodeErrors(groupsMap, true)
     processExecutionError(groupsMap, true)
 
-    return isSingleNodeSelected.value
+    const executionGroups = isSingleNodeSelected.value
       ? toSortedGroups(regroupByErrorMessage(groupsMap))
       : toSortedGroups(groupsMap)
+
+    return [...buildMissingNodeGroups(), ...executionGroups]
   })
 
   const filteredGroups = computed<ErrorGroup[]>(() => {
@@ -373,10 +584,15 @@ export function useErrorGroups(
   const groupedErrorMessages = computed<string[]>(() => {
     const messages = new Set<string>()
     for (const group of allErrorGroups.value) {
-      for (const card of group.cards) {
-        for (const err of card.errors) {
-          messages.add(err.message)
+      if (group.type === 'execution') {
+        for (const card of group.cards) {
+          for (const err of card.errors) {
+            messages.add(err.message)
+          }
         }
+      } else {
+        // Groups without cards (e.g. missing_node) surface their title as the message.
+        messages.add(group.title)
       }
     }
     return Array.from(messages)
@@ -389,6 +605,9 @@ export function useErrorGroups(
     collapseState,
     isSingleNodeSelected,
     errorNodeCache,
-    groupedErrorMessages
+    missingNodeCache,
+    groupedErrorMessages,
+    missingPackGroups,
+    swapNodeGroups
   }
 }

src/components/rightSidePanel/layout/PropertiesAccordionItem.vue

@@ -10,12 +10,14 @@ const {
   label,
   enableEmptyState,
   tooltip,
+  size = 'default',
   class: className
 } = defineProps<{
   disabled?: boolean
   label?: string
   enableEmptyState?: boolean
   tooltip?: string
+  size?: 'default' | 'lg'
   class?: string
 }>()
 
@@ -39,7 +41,8 @@ const tooltipConfig = computed(() => {
         type="button"
         :class="
           cn(
-            'group min-h-12 bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
+            'group bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
+            size === 'lg' ? 'min-h-16' : 'min-h-12',
             !disabled && 'cursor-pointer'
           )
         "

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -131,6 +131,12 @@ const nodeHasError = computed(() => {
   return hasDirectError.value || hasContainerInternalError.value
 })
 
+const showSeeError = computed(
+  () =>
+    nodeHasError.value &&
+    useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')
+)
+
 const parentGroup = computed<LGraphGroup | null>(() => {
   if (!targetNode.value || !getNodeParentGroup) return null
   return getNodeParentGroup(targetNode.value)
@@ -194,6 +200,7 @@ defineExpose({
       :enable-empty-state
       :disabled="isEmpty"
       :tooltip
+      :size="showSeeError ? 'lg' : 'default'"
     >
       <template #label>
         <div class="flex flex-wrap items-center gap-2 flex-1 min-w-0">
@@ -223,13 +230,10 @@ defineExpose({
             </span>
           </span>
           <Button
-            v-if="
-              nodeHasError &&
-              useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')
-            "
+            v-if="showSeeError"
             variant="secondary"
             size="sm"
-            class="shrink-0 rounded-lg text-sm"
+            class="shrink-0 rounded-lg text-sm h-8"
             @click.stop="navigateToErrorTab"
           >
             {{ t('rightSidePanel.seeError') }}

src/components/rightSidePanel/subgraph/SubgraphEditor.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import DraggableList from '@/components/common/DraggableList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import {
   demoteWidget,
@@ -17,10 +18,10 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
-import { DraggableList } from '@/scripts/ui/draggableList'
 import { useLitegraphService } from '@/services/litegraphService'
 import { usePromotionStore } from '@/stores/promotionStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+import { cn } from '@/utils/tailwindUtil'
 
 import SubgraphNodeWidget from './SubgraphNodeWidget.vue'
 
@@ -30,9 +31,6 @@ const promotionStore = usePromotionStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const { searchQuery } = storeToRefs(rightSidePanelStore)
 
-const draggableList = ref<DraggableList | undefined>(undefined)
-const draggableItems = ref()
-
 const promotionEntries = computed(() => {
   const node = activeNode.value
   if (!node) return []
@@ -195,54 +193,9 @@ function showRecommended() {
   }
 }
 
-function setDraggableState() {
-  draggableList.value?.dispose()
-  if (searchQuery.value || !draggableItems.value?.children?.length) return
-  draggableList.value = new DraggableList(
-    draggableItems.value,
-    '.draggable-item'
-  )
-  draggableList.value.applyNewItemsOrder = function () {
-    const reorderedItems = []
-
-    let oldPosition = -1
-    this.getAllItems().forEach((item, index) => {
-      if (item === this.draggableItem) {
-        oldPosition = index
-        return
-      }
-      if (!this.isItemToggled(item)) {
-        reorderedItems[index] = item
-        return
-      }
-      const newIndex = this.isItemAbove(item) ? index + 1 : index - 1
-      reorderedItems[newIndex] = item
-    })
-
-    for (let index = 0; index < this.getAllItems().length; index++) {
-      const item = reorderedItems[index]
-      if (typeof item === 'undefined') {
-        reorderedItems[index] = this.draggableItem
-      }
-    }
-    const newPosition = reorderedItems.indexOf(this.draggableItem)
-    const aw = activeWidgets.value
-    const [w] = aw.splice(oldPosition, 1)
-    aw.splice(newPosition, 0, w)
-    activeWidgets.value = aw
-  }
-}
-watch(filteredActive, () => {
-  setDraggableState()
-})
-
 onMounted(() => {
-  setDraggableState()
   if (activeNode.value) pruneDisconnected(activeNode.value)
 })
-onBeforeUnmount(() => {
-  draggableList.value?.dispose()
-})
 </script>
 
 <template>
@@ -280,19 +233,18 @@ onBeforeUnmount(() => {
             {{ $t('subgraphStore.hideAll') }}</a
           >
         </div>
-        <div ref="draggableItems" class="pb-2 px-2 space-y-0.5 mt-0.5">
+        <DraggableList v-slot="{ dragClass }" v-model="activeWidgets">
           <SubgraphNodeWidget
             v-for="[node, widget] in filteredActive"
             :key="toKey([node, widget])"
-            class="bg-comfy-menu-bg"
+            :class="cn(!searchQuery && dragClass, 'bg-comfy-menu-bg')"
             :node-title="node.title"
             :widget-name="widget.name"
-            :is-shown="true"
-            :is-draggable="!searchQuery"
             :is-physical="node.id === -1"
+            :is-draggable="!searchQuery"
             @toggle-visibility="demote([node, widget])"
           />
-        </div>
+        </DraggableList>
       </div>
 
       <div

src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue

@@ -29,8 +29,7 @@ function getIcon() {
       cn(
         'flex py-1 px-2 break-all rounded items-center gap-1',
         'bg-node-component-surface',
-        props.isDraggable &&
-          'draggable-item drag-handle cursor-grab [&.is-draggable]:cursor-grabbing hover:ring-1 ring-accent-background',
+        props.isDraggable && 'hover:ring-1 ring-accent-background',
         props.class
       )
     "

src/components/searchbox/NodeSearchFilter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="_content">
+  <div class="flex flex-col gap-2">
     <SelectButton
       v-model="selectedFilter"
       class="filter-type-select"
@@ -16,7 +16,7 @@
       auto-filter-focus
     />
   </div>
-  <div class="_footer">
+  <div class="flex flex-col items-end pt-4">
     <Button type="button" @click="submit">{{ $t('g.add') }}</Button>
   </div>
 </template>
@@ -67,15 +67,3 @@ const submit = () => {
   })
 }
 </script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-._content {
-  @apply flex flex-col space-y-2;
-}
-
-._footer {
-  @apply flex flex-col pt-4 items-end;
-}
-</style>

src/components/sidebar/SideToolbar.vue

@@ -255,8 +255,6 @@ onMounted(() => {
 </style>
 
 <style scoped>
-@reference "tailwindcss";
-
 .floating-sidebar {
   padding: var(--sidebar-padding);
 }

src/components/sidebar/SidebarIcon.vue

@@ -15,7 +15,7 @@
     :aria-label="computedTooltip"
     @click="emit('click', $event)"
   >
-    <div class="side-bar-button-content">
+    <div class="side-bar-button-content flex flex-col items-center gap-2">
       <slot name="icon">
         <div class="sidebar-icon-wrapper relative">
           <i
@@ -40,9 +40,11 @@
           </span>
         </div>
       </slot>
-      <span v-if="label && !isSmall" class="side-bar-button-label">{{
-        st(label, label)
-      }}</span>
+      <span
+        v-if="label && !isSmall"
+        class="side-bar-button-label text-center text-[10px]"
+        >{{ st(label, label) }}</span
+      >
     </div>
   </Button>
 </template>
@@ -104,8 +106,6 @@ const computedTooltip = computed(() => st(tooltip, tooltip) + tooltipSuffix)
 </style>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .side-bar-button {
   width: var(--sidebar-width);
   height: var(--sidebar-item-height);
@@ -117,12 +117,7 @@ const computedTooltip = computed(() => st(tooltip, tooltip) + tooltipSuffix)
   height: var(--sidebar-width);
 }
 
-.side-bar-button-content {
-  @apply flex flex-col items-center gap-2;
-}
-
 .side-bar-button-label {
-  @apply text-[10px] text-center;
   line-height: 1;
 }
 

src/components/sidebar/tabs/AssetsSidebarListView.test.ts

@@ -106,4 +106,42 @@ describe('AssetsSidebarListView', () => {
     expect(assetListItem?.props('previewUrl')).toBe('')
     expect(assetListItem?.props('isVideoPreview')).toBe(false)
   })
+
+  it('emits preview-asset when item preview is clicked', async () => {
+    const imageAsset = {
+      ...buildAsset('image-asset', 'image.png'),
+      preview_url: '/api/view/image.png',
+      user_metadata: {}
+    } satisfies AssetItem
+
+    const wrapper = mountListView([buildOutputItem(imageAsset)])
+    const listItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
+    const assetListItem = listItems.at(-1)
+
+    expect(assetListItem).toBeDefined()
+
+    assetListItem!.vm.$emit('preview-click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('preview-asset')).toEqual([[imageAsset]])
+  })
+
+  it('emits preview-asset when item is double-clicked', async () => {
+    const imageAsset = {
+      ...buildAsset('image-asset-dbl', 'image.png'),
+      preview_url: '/api/view/image.png',
+      user_metadata: {}
+    } satisfies AssetItem
+
+    const wrapper = mountListView([buildOutputItem(imageAsset)])
+    const listItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
+    const assetListItem = listItems.at(-1)
+
+    expect(assetListItem).toBeDefined()
+
+    await assetListItem!.trigger('dblclick')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('preview-asset')).toEqual([[imageAsset]])
+  })
 })

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -56,6 +56,8 @@
             @mouseleave="onAssetLeave(item.asset.id)"
             @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
             @click.stop="emit('select-asset', item.asset, selectableAssets)"
+            @dblclick.stop="emit('preview-asset', item.asset)"
+            @preview-click="emit('preview-asset', item.asset)"
             @stack-toggle="void toggleStack(item.asset)"
           >
             <template v-if="hoveredAssetId === item.asset.id" #actions>
@@ -116,6 +118,7 @@ const assetsStore = useAssetsStore()
 
 const emit = defineEmits<{
   (e: 'select-asset', asset: AssetItem, assets?: AssetItem[]): void
+  (e: 'preview-asset', asset: AssetItem): void
   (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
   (e: 'approach-end'): void
 }>()

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -95,6 +95,7 @@
           :toggle-stack="toggleListViewStack"
           :asset-type="activeTab"
           @select-asset="handleAssetSelect"
+          @preview-asset="handleZoomClick"
           @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
         />
@@ -216,10 +217,6 @@ import {
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-// Lazy-loaded to avoid pulling THREE.js into the main bundle
-const Load3dViewerContent = defineAsyncComponent(
-  () => import('@/components/load3d/Load3dViewerContent.vue')
-)
 import AssetsSidebarGridView from '@/components/sidebar/tabs/AssetsSidebarGridView.vue'
 import AssetsSidebarListView from '@/components/sidebar/tabs/AssetsSidebarListView.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
@@ -251,6 +248,10 @@ import {
 } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'
 
+const Load3dViewerContent = defineAsyncComponent(
+  () => import('@/components/load3d/Load3dViewerContent.vue')
+)
+
 const { t } = useI18n()
 
 const emit = defineEmits<{ assetSelected: [asset: AssetItem] }>()

src/components/sidebar/tabs/JobHistorySidebarTab.vue

@@ -67,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, defineAsyncComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import JobFilterActions from '@/components/queue/job/JobFilterActions.vue'
@@ -86,11 +86,17 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueStore } from '@/stores/queueStore'
 
+const Load3dViewerContent = defineAsyncComponent(
+  () => import('@/components/load3d/Load3dViewerContent.vue')
+)
+
 const { t, n } = useI18n()
 const commandStore = useCommandStore()
+const dialogStore = useDialogStore()
 const executionStore = useExecutionStore()
 const queueStore = useQueueStore()
 const { showQueueClearHistoryDialog } = useQueueClearHistoryDialog()
@@ -151,6 +157,24 @@ const {
 } = useResultGallery(() => filteredTasks.value)
 
 const onViewItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
+  const previewOutput = item.taskRef?.previewOutput
+
+  if (previewOutput?.is3D) {
+    dialogStore.showDialog({
+      key: 'asset-3d-viewer',
+      title: item.title,
+      component: Load3dViewerContent,
+      props: {
+        modelUrl: previewOutput.url || ''
+      },
+      dialogComponentProps: {
+        style: 'width: 80vw; height: 80vh;',
+        maximizable: true
+      }
+    })
+    return
+  }
+
   await openResultGallery(item)
 })
 

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -11,6 +11,7 @@
     <div class="comfy-vue-side-bar-header flex flex-col gap-2">
       <Toolbar
         class="min-h-16 bg-transparent rounded-none border-x-0 border-t-0 px-2 2xl:px-4"
+        :pt="sidebarPt"
       >
         <template #start>
           <span class="truncate font-bold" :title="props.title">
@@ -20,7 +21,7 @@
         </template>
         <template #end>
           <div
-            class="touch:w-auto touch:opacity-100 flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
+            class="touch:w-auto touch:opacity-100 [&_.p-button]:py-1 2xl:[&_.p-button]:py-2 flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
           >
             <slot name="tool-buttons" />
           </div>
@@ -54,19 +55,10 @@ const props = defineProps<{
   title: string
   class?: string
 }>()
+const sidebarPt = {
+  start: 'min-w-0 flex-1 overflow-hidden'
+}
 
 const containerRef = ref<HTMLElement | null>(null)
 provide(SidebarContainerKey, containerRef)
 </script>
-
-<style scoped>
-@reference '../../../assets/css/style.css';
-
-:deep(.p-toolbar-end) .p-button {
-  @apply py-1 2xl:py-2;
-}
-
-:deep(.p-toolbar-start) {
-  @apply min-w-0 flex-1 overflow-hidden;
-}
-</style>

src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="node-lib-node-container"
+    class="node-lib-node-container h-full w-full"
     data-testid="node-tree-leaf"
     :data-node-name="nodeDef.display_name"
   >
@@ -206,11 +206,3 @@ onUnmounted(() => {
   nodeContentElement.value?.removeEventListener('mouseleave', handleMouseLeave)
 })
 </script>
-
-<style scoped>
-@reference '../../../../assets/css/style.css';
-
-.node-lib-node-container {
-  @apply h-full w-full;
-}
-</style>

src/components/topbar/WorkflowTabPopover.vue

@@ -140,54 +140,65 @@ defineExpose({
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .workflow-preview-content {
-  @apply flex flex-col rounded-xl overflow-hidden;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--radius-xl);
   max-width: var(--popover-width);
   background-color: var(--comfy-menu-bg);
   color: var(--fg-color);
 }
 
 .workflow-preview-thumbnail {
-  @apply relative p-2;
+  position: relative;
+  padding: calc(var(--spacing) * 2);
 }
 
 .workflow-preview-thumbnail img {
-  @apply shadow-md;
+  box-shadow: var(--shadow-md);
   background-color: color-mix(in srgb, var(--comfy-menu-bg) 70%, black);
 }
 
 .dark-theme .workflow-preview-thumbnail img {
-  @apply shadow-lg;
+  box-shadow: var(--shadow-lg);
 }
 
 .workflow-preview-footer {
-  @apply pt-1 pb-2 px-3;
+  padding-top: calc(var(--spacing) * 1);
+  padding-right: calc(var(--spacing) * 3);
+  padding-bottom: calc(var(--spacing) * 2);
+  padding-left: calc(var(--spacing) * 3);
 }
 
 .workflow-preview-name {
-  @apply block text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height));
+  font-weight: var(--font-weight-medium);
   color: var(--fg-color);
 }
 </style>
 
 <style>
-@reference '../../assets/css/style.css';
-
 .workflow-popover-fade {
   --p-popover-background: transparent;
   --p-popover-content-padding: 0;
-  @apply bg-transparent rounded-xl shadow-lg;
+  border-radius: var(--radius-xl);
+  background-color: transparent;
+  box-shadow: var(--shadow-lg);
   transition: opacity 0.15s ease-out !important;
 }
 
 .workflow-popover-fade.p-popover-flipped {
-  @apply -translate-y-full;
+  transform: translateY(-100%);
 }
 
 .dark-theme .workflow-popover-fade {
-  @apply shadow-2xl;
+  box-shadow: var(--shadow-2xl);
 }
 
 .workflow-popover-fade.p-popover::after,

src/components/topbar/WorkflowTabs.vue

@@ -300,63 +300,72 @@ onUpdated(() => {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .workflow-tabs-container {
   background-color: var(--comfy-menu-bg);
 }
 
 :deep(.p-togglebutton) {
-  @apply p-0 bg-transparent rounded-none shrink relative border-0 border-r border-solid;
+  position: relative;
+  flex-shrink: 1;
+  border: 0;
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-radius: 0;
+  background-color: transparent;
+  padding: 0;
   border-right-color: var(--border-color);
   min-width: 90px;
 }
 
 .overflow-arrow {
-  @apply px-2 rounded-none;
+  border-radius: 0;
+  padding-inline: calc(var(--spacing) * 2);
 }
 
 .overflow-arrow[disabled] {
-  @apply opacity-25;
+  opacity: 0.25;
 }
 
 :deep(.p-togglebutton > .p-togglebutton-content) {
-  @apply max-w-full;
+  max-width: 100%;
 }
 
 :deep(.workflow-tab) {
-  @apply max-w-full;
+  max-width: 100%;
 }
 
 :deep(.p-togglebutton::before) {
-  @apply hidden;
+  display: none;
 }
 
 :deep(.p-togglebutton:first-child) {
-  @apply border-l border-solid;
+  border-left-style: solid;
+  border-left-width: 1px;
   border-left-color: var(--border-color);
 }
 
 :deep(.p-togglebutton:not(:first-child)) {
-  @apply border-l-0;
+  border-left-width: 0;
 }
 
 :deep(.p-togglebutton.p-togglebutton-checked) {
-  @apply border-b border-solid h-full;
+  height: 100%;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
   border-bottom-color: var(--p-button-text-primary-color);
 }
 
 :deep(.p-togglebutton:not(.p-togglebutton-checked)) {
-  @apply opacity-75;
+  opacity: 0.75;
 }
 
 :deep(.p-togglebutton-checked) .close-button,
 :deep(.p-togglebutton:hover) .close-button {
-  @apply visible;
+  visibility: visible;
 }
 
 :deep(.p-scrollpanel-content) {
-  @apply h-full;
+  height: 100%;
 }
 
 :deep(.workflow-tabs) {
@@ -366,11 +375,12 @@ onUpdated(() => {
 /* Scrollbar half opacity to avoid blocking the active tab bottom border */
 :deep(.p-scrollpanel:hover .p-scrollpanel-bar),
 :deep(.p-scrollpanel:active .p-scrollpanel-bar) {
-  @apply opacity-50;
+  opacity: 0.5;
 }
 
 :deep(.p-selectbutton) {
-  @apply rounded-none h-full;
+  height: 100%;
+  border-radius: 0;
 }
 
 .workflow-tabs-container-desktop {
@@ -378,7 +388,7 @@ onUpdated(() => {
 }
 
 .window-actions-spacer {
-  @apply flex-auto;
+  flex: auto;
   /* If we are using custom titlebar, then we need to add a gap for the user to drag the window */
   --window-actions-spacer-width: min(75px, env(titlebar-area-width, 0) * 9999);
   min-width: var(--window-actions-spacer-width);

src/composables/graph/useGraphNodeManager.test.ts

@@ -4,6 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, nextTick, watch } from 'vue'
 
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import { createPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetView'
 import { BaseWidget, LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import {
   createTestSubgraph,
@@ -82,6 +83,163 @@ describe('Node Reactivity', () => {
   })
 })
 
+describe('Widget slotMetadata reactivity on link disconnect', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  function createWidgetInputGraph() {
+    const graph = new LGraph()
+    const node = new LGraphNode('test')
+
+    // Add a widget and an associated input slot (simulates "widget converted to input")
+    node.addWidget('string', 'prompt', 'hello', () => undefined, {})
+    const input = node.addInput('prompt', 'STRING')
+    // Associate the input slot with the widget (as widgetInputs extension does)
+    input.widget = { name: 'prompt' }
+
+    // Start with a connected link
+    input.link = 42
+
+    graph.add(node)
+    return { graph, node }
+  }
+
+  it('sets slotMetadata.linked to true when input has a link', () => {
+    const { graph, node } = createWidgetInputGraph()
+    const { vueNodeData } = useGraphNodeManager(graph)
+
+    const nodeData = vueNodeData.get(String(node.id))
+    const widgetData = nodeData?.widgets?.find((w) => w.name === 'prompt')
+
+    expect(widgetData?.slotMetadata).toBeDefined()
+    expect(widgetData?.slotMetadata?.linked).toBe(true)
+  })
+
+  it('updates slotMetadata.linked to false after link disconnect event', async () => {
+    const { graph, node } = createWidgetInputGraph()
+    const { vueNodeData } = useGraphNodeManager(graph)
+
+    const nodeData = vueNodeData.get(String(node.id))
+    const widgetData = nodeData?.widgets?.find((w) => w.name === 'prompt')
+
+    // Verify initially linked
+    expect(widgetData?.slotMetadata?.linked).toBe(true)
+
+    // Simulate link disconnection (as LiteGraph does before firing the event)
+    node.inputs[0].link = null
+
+    // Fire the trigger event that LiteGraph fires on disconnect
+    graph.trigger('node:slot-links:changed', {
+      nodeId: node.id,
+      slotType: NodeSlotType.INPUT,
+      slotIndex: 0,
+      connected: false,
+      linkId: 42
+    })
+
+    await nextTick()
+
+    // slotMetadata.linked should now be false
+    expect(widgetData?.slotMetadata?.linked).toBe(false)
+  })
+
+  it('reactively updates disabled state in a derived computed after disconnect', async () => {
+    const { graph, node } = createWidgetInputGraph()
+    const { vueNodeData } = useGraphNodeManager(graph)
+
+    const nodeData = vueNodeData.get(String(node.id))!
+
+    // Mimic what processedWidgets does in NodeWidgets.vue:
+    // derive disabled from slotMetadata.linked
+    const derivedDisabled = computed(() => {
+      const widgets = nodeData.widgets ?? []
+      const widget = widgets.find((w) => w.name === 'prompt')
+      return widget?.slotMetadata?.linked ? true : false
+    })
+
+    // Initially linked → disabled
+    expect(derivedDisabled.value).toBe(true)
+
+    // Track changes
+    const onChange = vi.fn()
+    watch(derivedDisabled, onChange)
+
+    // Simulate disconnect
+    node.inputs[0].link = null
+    graph.trigger('node:slot-links:changed', {
+      nodeId: node.id,
+      slotType: NodeSlotType.INPUT,
+      slotIndex: 0,
+      connected: false,
+      linkId: 42
+    })
+
+    await nextTick()
+
+    // The derived computed should now return false
+    expect(derivedDisabled.value).toBe(false)
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('updates slotMetadata for promoted widgets where SafeWidgetData.name differs from input.widget.name', async () => {
+    // Set up a subgraph with an interior node that has a "prompt" widget.
+    // createPromotedWidgetView resolves against this interior node.
+    const subgraph = createTestSubgraph()
+    const interiorNode = new LGraphNode('interior')
+    interiorNode.id = 10
+    interiorNode.addWidget('string', 'prompt', 'hello', () => undefined, {})
+    subgraph.add(interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 123 })
+
+    // Create a PromotedWidgetView with displayName="value" (subgraph input
+    // slot name) and sourceWidgetName="prompt" (interior widget name).
+    // PromotedWidgetView.name returns "value", but safeWidgetMapper sets
+    // SafeWidgetData.name to sourceWidgetName ("prompt").
+    const promotedView = createPromotedWidgetView(
+      subgraphNode,
+      '10',
+      'prompt',
+      'value'
+    )
+
+    // Host the promoted view on a regular node so we can control widgets
+    // directly (SubgraphNode.widgets is a synthetic getter).
+    const graph = new LGraph()
+    const hostNode = new LGraphNode('host')
+    hostNode.widgets = [promotedView]
+    const input = hostNode.addInput('value', 'STRING')
+    input.widget = { name: 'value' }
+    input.link = 42
+    graph.add(hostNode)
+
+    const { vueNodeData } = useGraphNodeManager(graph)
+    const nodeData = vueNodeData.get(String(hostNode.id))
+
+    // SafeWidgetData.name is "prompt" (sourceWidgetName), but the
+    // input slot widget name is "value" — slotName bridges this gap.
+    const widgetData = nodeData?.widgets?.find((w) => w.name === 'prompt')
+    expect(widgetData).toBeDefined()
+    expect(widgetData?.slotName).toBe('value')
+    expect(widgetData?.slotMetadata?.linked).toBe(true)
+
+    // Disconnect
+    hostNode.inputs[0].link = null
+    graph.trigger('node:slot-links:changed', {
+      nodeId: hostNode.id,
+      slotType: NodeSlotType.INPUT,
+      slotIndex: 0,
+      connected: false,
+      linkId: 42
+    })
+
+    await nextTick()
+
+    expect(widgetData?.slotMetadata?.linked).toBe(false)
+  })
+})
+
 describe('Subgraph Promoted Pseudo Widgets', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))

src/composables/graph/useGraphNodeManager.ts

@@ -14,6 +14,7 @@ import type {
 } from '@/lib/litegraph/src/interfaces'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
@@ -69,6 +70,12 @@ export interface SafeWidgetData {
   spec?: InputSpec
   /** Input slot metadata (index and link status) */
   slotMetadata?: WidgetSlotMetadata
+  /**
+   * Original LiteGraph widget name used for slot metadata matching.
+   * For promoted widgets, `name` is `sourceWidgetName` (interior widget name)
+   * which differs from the subgraph node's input slot widget name.
+   */
+  slotName?: string
 }
 
 export interface VueNodeData {
@@ -238,7 +245,8 @@ function safeWidgetMapper(
         options: isPromotedPseudoWidget
           ? { ...options, canvasOnly: true }
           : options,
-        slotMetadata: slotInfo
+        slotMetadata: slotInfo,
+        slotName: name !== widget.name ? widget.name : undefined
       }
     } catch (error) {
       return {
@@ -376,7 +384,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
 
     // Update only widgets with new slot metadata, keeping other widget data intact
     for (const widget of currentData.widgets ?? []) {
-      const slotInfo = slotMetadata.get(widget.name)
+      const slotInfo = slotMetadata.get(widget.slotName ?? widget.name)
       if (slotInfo) widget.slotMetadata = slotInfo
     }
   }
@@ -435,6 +443,11 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       const nodePosition = { x: node.pos[0], y: node.pos[1] }
       const nodeSize = { width: node.size[0], height: node.size[1] }
 
+      // Skip layout creation if it already exists
+      // (e.g. in-place node replacement where the old node's layout is reused for the new node with the same ID).
+      const existingLayout = layoutStore.getNodeLayoutRef(id).value
+      if (existingLayout) return
+
       // Add node to layout store with final positions
       setSource(LayoutSource.Canvas)
       void createNode(id, {

src/composables/node/useNodeCanvasImagePreview.ts

@@ -2,7 +2,11 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useImagePreviewWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget'
 
 export const CANVAS_IMAGE_PREVIEW_WIDGET = '$$canvas-image-preview'
-const CANVAS_IMAGE_PREVIEW_NODE_TYPES = new Set(['PreviewImage', 'SaveImage'])
+const CANVAS_IMAGE_PREVIEW_NODE_TYPES = new Set([
+  'PreviewImage',
+  'SaveImage',
+  'GLSLShader'
+])
 
 export function supportsVirtualCanvasImagePreview(node: LGraphNode): boolean {
   return CANVAS_IMAGE_PREVIEW_NODE_TYPES.has(node.type)

src/composables/node/useNodeImageUpload.test.ts

@@ -0,0 +1,175 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+
+const { mockFetchApi, mockAddAlert, mockUpdateInputs } = vi.hoisted(() => ({
+  mockFetchApi: vi.fn(),
+  mockAddAlert: vi.fn(),
+  mockUpdateInputs: vi.fn()
+}))
+
+let capturedDragOnDrop: (files: File[]) => Promise<string[]>
+
+vi.mock('@/composables/node/useNodeDragAndDrop', () => ({
+  useNodeDragAndDrop: (
+    _node: LGraphNode,
+    opts: { onDrop: typeof capturedDragOnDrop }
+  ) => {
+    capturedDragOnDrop = opts.onDrop
+  }
+}))
+
+vi.mock('@/composables/node/useNodeFileInput', () => ({
+  useNodeFileInput: () => ({ openFileSelection: vi.fn() })
+}))
+
+vi.mock('@/composables/node/useNodePaste', () => ({
+  useNodePaste: vi.fn()
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key
+}))
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: () => ({ addAlert: mockAddAlert })
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: { fetchApi: mockFetchApi }
+}))
+
+vi.mock('@/stores/assetsStore', () => ({
+  useAssetsStore: () => ({ updateInputs: mockUpdateInputs })
+}))
+
+function createMockNode(): LGraphNode {
+  return {
+    isUploading: false,
+    imgs: [new Image()],
+    graph: { setDirtyCanvas: vi.fn() },
+    size: [300, 400]
+  } as unknown as LGraphNode
+}
+
+function createFile(name = 'test.png'): File {
+  return new File(['data'], name, { type: 'image/png' })
+}
+
+function successResponse(name: string, subfolder?: string) {
+  return {
+    status: 200,
+    json: () => Promise.resolve({ name, subfolder })
+  }
+}
+
+function failResponse(status = 500) {
+  return {
+    status,
+    statusText: 'Server Error'
+  }
+}
+
+describe('useNodeImageUpload', () => {
+  let node: LGraphNode
+  let onUploadComplete: (paths: string[]) => void
+  let onUploadStart: (files: File[]) => void
+  let onUploadError: () => void
+
+  beforeEach(async () => {
+    vi.resetModules()
+    vi.clearAllMocks()
+    node = createMockNode()
+    onUploadComplete = vi.fn()
+    onUploadStart = vi.fn()
+    onUploadError = vi.fn()
+
+    const { useNodeImageUpload } = await import('./useNodeImageUpload')
+    useNodeImageUpload(node, {
+      onUploadComplete,
+      onUploadStart,
+      onUploadError,
+      folder: 'input'
+    })
+  })
+
+  it('sets isUploading true during upload and false after', async () => {
+    mockFetchApi.mockResolvedValueOnce(successResponse('test.png'))
+
+    const promise = capturedDragOnDrop([createFile()])
+    expect(node.isUploading).toBe(true)
+
+    await promise
+    expect(node.isUploading).toBe(false)
+  })
+
+  it('clears node.imgs on upload start', async () => {
+    mockFetchApi.mockResolvedValueOnce(successResponse('test.png'))
+
+    const promise = capturedDragOnDrop([createFile()])
+    expect(node.imgs).toBeUndefined()
+
+    await promise
+  })
+
+  it('calls onUploadStart with files', async () => {
+    mockFetchApi.mockResolvedValueOnce(successResponse('test.png'))
+    const files = [createFile()]
+
+    await capturedDragOnDrop(files)
+    expect(onUploadStart).toHaveBeenCalledWith(files)
+  })
+
+  it('calls onUploadComplete with valid paths on success', async () => {
+    mockFetchApi.mockResolvedValueOnce(successResponse('test.png'))
+
+    await capturedDragOnDrop([createFile()])
+    expect(onUploadComplete).toHaveBeenCalledWith(['test.png'])
+  })
+
+  it('includes subfolder in returned path', async () => {
+    mockFetchApi.mockResolvedValueOnce(successResponse('test.png', 'pasted'))
+
+    await capturedDragOnDrop([createFile()])
+    expect(onUploadComplete).toHaveBeenCalledWith(['pasted/test.png'])
+  })
+
+  it('calls onUploadError when all uploads fail', async () => {
+    mockFetchApi.mockResolvedValueOnce(failResponse())
+
+    await capturedDragOnDrop([createFile()])
+    expect(onUploadError).toHaveBeenCalled()
+    expect(onUploadComplete).not.toHaveBeenCalled()
+  })
+
+  it('resets isUploading even when upload fails', async () => {
+    mockFetchApi.mockRejectedValueOnce(new Error('Network error'))
+
+    await capturedDragOnDrop([createFile()])
+    expect(node.isUploading).toBe(false)
+  })
+
+  it('rejects concurrent uploads with a toast', async () => {
+    mockFetchApi.mockImplementation(
+      () =>
+        new Promise((resolve) =>
+          setTimeout(() => resolve(successResponse('a.png')), 50)
+        )
+    )
+
+    const first = capturedDragOnDrop([createFile('a.png')])
+    const second = await capturedDragOnDrop([createFile('b.png')])
+
+    expect(second).toEqual([])
+    expect(mockAddAlert).toHaveBeenCalledWith('g.uploadAlreadyInProgress')
+
+    await first
+  })
+
+  it('calls setDirtyCanvas on start and finish', async () => {
+    mockFetchApi.mockResolvedValueOnce(successResponse('test.png'))
+
+    await capturedDragOnDrop([createFile()])
+    expect(node.graph?.setDirtyCanvas).toHaveBeenCalledTimes(2)
+  })
+})

src/composables/node/useNodeImageUpload.ts

@@ -1,6 +1,7 @@
 import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop'
 import { useNodeFileInput } from '@/composables/node/useNodeFileInput'
 import { useNodePaste } from '@/composables/node/useNodePaste'
+import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { ResultItemType } from '@/schemas/apiSchema'
@@ -62,6 +63,8 @@ interface ImageUploadOptions {
    * @example 'input', 'output', 'temp'
    */
   folder?: ResultItemType
+  onUploadStart?: (files: File[]) => void
+  onUploadError?: () => void
 }
 
 /**
@@ -90,10 +93,29 @@ export const useNodeImageUpload = (
   }
 
   const handleUploadBatch = async (files: File[]) => {
-    const paths = await Promise.all(files.map(handleUpload))
-    const validPaths = paths.filter((p): p is string => !!p)
-    if (validPaths.length) onUploadComplete(validPaths)
-    return validPaths
+    if (node.isUploading) {
+      useToastStore().addAlert(t('g.uploadAlreadyInProgress'))
+      return []
+    }
+    node.isUploading = true
+
+    try {
+      node.imgs = undefined
+      node.graph?.setDirtyCanvas(true)
+      options.onUploadStart?.(files)
+
+      const paths = await Promise.all(files.map(handleUpload))
+      const validPaths = paths.filter((p): p is string => !!p)
+      if (validPaths.length) {
+        onUploadComplete(validPaths)
+      } else {
+        options.onUploadError?.()
+      }
+      return validPaths
+    } finally {
+      node.isUploading = false
+      node.graph?.setDirtyCanvas(true)
+    }
   }
 
   // Handle drag & drop

src/composables/painter/usePainter.ts

@@ -0,0 +1,780 @@
+import type { Ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useElementSize } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+
+import {
+  getEffectiveBrushSize,
+  getEffectiveHardness
+} from '@/composables/maskeditor/brushUtils'
+import { StrokeProcessor } from '@/composables/maskeditor/StrokeProcessor'
+import { hexToRgb } from '@/utils/colorUtil'
+import type { Point } from '@/extensions/core/maskeditor/types'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { isCloud } from '@/platform/distribution/types'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+
+type PainterTool = 'brush' | 'eraser'
+
+export const PAINTER_TOOLS: Record<string, PainterTool> = {
+  BRUSH: 'brush',
+  ERASER: 'eraser'
+} as const
+
+interface UsePainterOptions {
+  canvasEl: Ref<HTMLCanvasElement | null>
+  modelValue: Ref<string>
+}
+
+export function usePainter(nodeId: string, options: UsePainterOptions) {
+  const { canvasEl, modelValue } = options
+  const { t } = useI18n()
+  const nodeOutputStore = useNodeOutputStore()
+  const toastStore = useToastStore()
+
+  const isDirty = ref(false)
+
+  const canvasWidth = ref(512)
+  const canvasHeight = ref(512)
+
+  const cursorX = ref(0)
+  const cursorY = ref(0)
+  const cursorVisible = ref(false)
+
+  const inputImageUrl = ref<string | null>(null)
+  const isImageInputConnected = ref(false)
+
+  let isDrawing = false
+  let strokeProcessor: StrokeProcessor | null = null
+  let lastPoint: Point | null = null
+
+  let cachedRect: DOMRect | null = null
+
+  let mainCtx: CanvasRenderingContext2D | null = null
+
+  let strokeCanvas: HTMLCanvasElement | null = null
+  let strokeCtx: CanvasRenderingContext2D | null = null
+
+  let baseCanvas: HTMLCanvasElement | null = null
+  let baseCtx: CanvasRenderingContext2D | null = null
+  let hasBaseSnapshot = false
+  let hasStrokes = false
+
+  let dirtyX0 = 0
+  let dirtyY0 = 0
+  let dirtyX1 = 0
+  let dirtyY1 = 0
+  let hasDirtyRect = false
+
+  let strokeBrush: {
+    radius: number
+    effectiveRadius: number
+    effectiveHardness: number
+    hardness: number
+    r: number
+    g: number
+    b: number
+  } | null = null
+
+  const litegraphNode = computed(() => {
+    if (!nodeId || !app.canvas.graph) return null
+    return app.canvas.graph.getNodeById(nodeId) as LGraphNode | null
+  })
+
+  function getWidgetByName(name: string): IBaseWidget | undefined {
+    return litegraphNode.value?.widgets?.find(
+      (w: IBaseWidget) => w.name === name
+    )
+  }
+
+  const tool = ref<PainterTool>(PAINTER_TOOLS.BRUSH)
+  const brushSize = ref(20)
+  const brushColor = ref('#ffffff')
+  const brushOpacity = ref(1)
+  const brushHardness = ref(1)
+  const backgroundColor = ref('#000000')
+
+  function restoreSettingsFromProperties() {
+    const node = litegraphNode.value
+    if (!node) return
+
+    const props = node.properties
+    if (props.painterTool != null) tool.value = props.painterTool as PainterTool
+    if (props.painterBrushSize != null)
+      brushSize.value = props.painterBrushSize as number
+    if (props.painterBrushColor != null)
+      brushColor.value = props.painterBrushColor as string
+    if (props.painterBrushOpacity != null)
+      brushOpacity.value = props.painterBrushOpacity as number
+    if (props.painterBrushHardness != null)
+      brushHardness.value = props.painterBrushHardness as number
+
+    const bgColorWidget = getWidgetByName('bg_color')
+    if (bgColorWidget) backgroundColor.value = bgColorWidget.value as string
+  }
+
+  function saveSettingsToProperties() {
+    const node = litegraphNode.value
+    if (!node) return
+
+    node.properties.painterTool = tool.value
+    node.properties.painterBrushSize = brushSize.value
+    node.properties.painterBrushColor = brushColor.value
+    node.properties.painterBrushOpacity = brushOpacity.value
+    node.properties.painterBrushHardness = brushHardness.value
+  }
+
+  function syncCanvasSizeToWidgets() {
+    const widthWidget = getWidgetByName('width')
+    const heightWidget = getWidgetByName('height')
+
+    if (widthWidget && widthWidget.value !== canvasWidth.value) {
+      widthWidget.value = canvasWidth.value
+      widthWidget.callback?.(canvasWidth.value)
+    }
+    if (heightWidget && heightWidget.value !== canvasHeight.value) {
+      heightWidget.value = canvasHeight.value
+      heightWidget.callback?.(canvasHeight.value)
+    }
+  }
+
+  function syncBackgroundColorToWidget() {
+    const bgColorWidget = getWidgetByName('bg_color')
+    if (bgColorWidget && bgColorWidget.value !== backgroundColor.value) {
+      bgColorWidget.value = backgroundColor.value
+      bgColorWidget.callback?.(backgroundColor.value)
+    }
+  }
+
+  function updateInputImageUrl() {
+    const node = litegraphNode.value
+    if (!node) {
+      inputImageUrl.value = null
+      isImageInputConnected.value = false
+      return
+    }
+
+    isImageInputConnected.value = node.isInputConnected(0)
+
+    const inputNode = node.getInputNode(0)
+    if (!inputNode) {
+      inputImageUrl.value = null
+      return
+    }
+
+    const urls = nodeOutputStore.getNodeImageUrls(inputNode)
+    inputImageUrl.value = urls?.length ? urls[0] : null
+  }
+
+  function syncCanvasSizeFromWidgets() {
+    const w = getWidgetByName('width')
+    const h = getWidgetByName('height')
+    canvasWidth.value = (w?.value as number) ?? 512
+    canvasHeight.value = (h?.value as number) ?? 512
+  }
+
+  function activeHardness(): number {
+    return tool.value === PAINTER_TOOLS.ERASER ? 1 : brushHardness.value
+  }
+
+  const { width: canvasDisplayWidth } = useElementSize(canvasEl)
+
+  const displayBrushSize = computed(() => {
+    if (!canvasDisplayWidth.value || !canvasWidth.value) return brushSize.value
+
+    const radius = brushSize.value / 2
+    const effectiveRadius = getEffectiveBrushSize(radius, activeHardness())
+    const effectiveDiameter = effectiveRadius * 2
+    return effectiveDiameter * (canvasDisplayWidth.value / canvasWidth.value)
+  })
+
+  function getCtx() {
+    if (!mainCtx && canvasEl.value) {
+      mainCtx = canvasEl.value.getContext('2d') ?? null
+    }
+    return mainCtx
+  }
+
+  function cacheCanvasRect() {
+    const el = canvasEl.value
+    if (el) cachedRect = el.getBoundingClientRect()
+  }
+
+  function getCanvasPoint(e: PointerEvent): Point | null {
+    const el = canvasEl.value
+    if (!el) return null
+    const rect = cachedRect ?? el.getBoundingClientRect()
+    return {
+      x: ((e.clientX - rect.left) / rect.width) * el.width,
+      y: ((e.clientY - rect.top) / rect.height) * el.height
+    }
+  }
+
+  function expandDirtyRect(cx: number, cy: number, r: number) {
+    const x0 = cx - r
+    const y0 = cy - r
+    const x1 = cx + r
+    const y1 = cy + r
+    if (!hasDirtyRect) {
+      dirtyX0 = x0
+      dirtyY0 = y0
+      dirtyX1 = x1
+      dirtyY1 = y1
+      hasDirtyRect = true
+    } else {
+      if (x0 < dirtyX0) dirtyX0 = x0
+      if (y0 < dirtyY0) dirtyY0 = y0
+      if (x1 > dirtyX1) dirtyX1 = x1
+      if (y1 > dirtyY1) dirtyY1 = y1
+    }
+  }
+
+  function snapshotBrush() {
+    const radius = brushSize.value / 2
+    const hardness = activeHardness()
+    const effectiveRadius = getEffectiveBrushSize(radius, hardness)
+    strokeBrush = {
+      radius,
+      effectiveRadius,
+      effectiveHardness: getEffectiveHardness(
+        radius,
+        hardness,
+        effectiveRadius
+      ),
+      hardness,
+      ...hexToRgb(brushColor.value)
+    }
+  }
+
+  function drawCircle(ctx: CanvasRenderingContext2D, point: Point) {
+    const b = strokeBrush!
+
+    expandDirtyRect(point.x, point.y, b.effectiveRadius)
+
+    ctx.beginPath()
+    ctx.arc(point.x, point.y, b.effectiveRadius, 0, Math.PI * 2)
+
+    if (b.hardness < 1) {
+      const gradient = ctx.createRadialGradient(
+        point.x,
+        point.y,
+        0,
+        point.x,
+        point.y,
+        b.effectiveRadius
+      )
+      gradient.addColorStop(0, `rgba(${b.r}, ${b.g}, ${b.b}, 1)`)
+      gradient.addColorStop(
+        b.effectiveHardness,
+        `rgba(${b.r}, ${b.g}, ${b.b}, 1)`
+      )
+      gradient.addColorStop(1, `rgba(${b.r}, ${b.g}, ${b.b}, 0)`)
+      ctx.fillStyle = gradient
+    }
+
+    ctx.fill()
+  }
+
+  function drawSegment(ctx: CanvasRenderingContext2D, from: Point, to: Point) {
+    const b = strokeBrush!
+
+    if (b.hardness < 1) {
+      const dx = to.x - from.x
+      const dy = to.y - from.y
+      const dist = Math.hypot(dx, dy)
+      const step = Math.max(1, b.effectiveRadius / 2)
+
+      if (dist > 0) {
+        const steps = Math.ceil(dist / step)
+        const dabPoint: Point = { x: 0, y: 0 }
+        for (let i = 1; i <= steps; i++) {
+          const t = i / steps
+          dabPoint.x = from.x + dx * t
+          dabPoint.y = from.y + dy * t
+          drawCircle(ctx, dabPoint)
+        }
+      }
+    } else {
+      expandDirtyRect(from.x, from.y, b.effectiveRadius)
+      ctx.beginPath()
+      ctx.moveTo(from.x, from.y)
+      ctx.lineTo(to.x, to.y)
+      ctx.stroke()
+      drawCircle(ctx, to)
+    }
+  }
+
+  function applyBrushStyle(ctx: CanvasRenderingContext2D) {
+    const b = strokeBrush!
+    const color = `rgb(${b.r}, ${b.g}, ${b.b})`
+
+    ctx.globalCompositeOperation = 'source-over'
+    ctx.globalAlpha = 1
+    ctx.fillStyle = color
+    ctx.strokeStyle = color
+    ctx.lineWidth = b.effectiveRadius * 2
+    ctx.lineCap = 'round'
+    ctx.lineJoin = 'round'
+  }
+
+  function ensureStrokeCanvas() {
+    const el = canvasEl.value
+    if (!el) return null
+
+    if (
+      !strokeCanvas ||
+      strokeCanvas.width !== el.width ||
+      strokeCanvas.height !== el.height
+    ) {
+      strokeCanvas = document.createElement('canvas')
+      strokeCanvas.width = el.width
+      strokeCanvas.height = el.height
+      strokeCtx = strokeCanvas.getContext('2d')
+    }
+
+    strokeCtx?.clearRect(0, 0, strokeCanvas.width, strokeCanvas.height)
+    return strokeCtx
+  }
+
+  function ensureBaseCanvas() {
+    const el = canvasEl.value
+    if (!el) return null
+
+    if (
+      !baseCanvas ||
+      baseCanvas.width !== el.width ||
+      baseCanvas.height !== el.height
+    ) {
+      baseCanvas = document.createElement('canvas')
+      baseCanvas.width = el.width
+      baseCanvas.height = el.height
+      baseCtx = baseCanvas.getContext('2d')
+    }
+
+    return baseCtx
+  }
+
+  function compositeStrokeToMain(isPreview: boolean = false) {
+    const el = canvasEl.value
+    const ctx = getCtx()
+    if (!el || !ctx || !strokeCanvas) return
+
+    const useDirty = hasDirtyRect
+    const sx = Math.max(0, Math.floor(dirtyX0))
+    const sy = Math.max(0, Math.floor(dirtyY0))
+    const sr = Math.min(el.width, Math.ceil(dirtyX1))
+    const sb = Math.min(el.height, Math.ceil(dirtyY1))
+    const sw = sr - sx
+    const sh = sb - sy
+    hasDirtyRect = false
+
+    if (hasBaseSnapshot && baseCanvas) {
+      if (useDirty && sw > 0 && sh > 0) {
+        ctx.clearRect(sx, sy, sw, sh)
+        ctx.drawImage(baseCanvas, sx, sy, sw, sh, sx, sy, sw, sh)
+      } else {
+        ctx.clearRect(0, 0, el.width, el.height)
+        ctx.drawImage(baseCanvas, 0, 0)
+      }
+    }
+
+    ctx.save()
+    const isEraser = tool.value === PAINTER_TOOLS.ERASER
+    ctx.globalAlpha = isEraser ? 1 : brushOpacity.value
+    ctx.globalCompositeOperation = isEraser ? 'destination-out' : 'source-over'
+    if (useDirty && sw > 0 && sh > 0) {
+      ctx.drawImage(strokeCanvas, sx, sy, sw, sh, sx, sy, sw, sh)
+    } else {
+      ctx.drawImage(strokeCanvas, 0, 0)
+    }
+    ctx.restore()
+
+    if (!isPreview) {
+      hasBaseSnapshot = false
+    }
+  }
+
+  function startStroke(e: PointerEvent) {
+    const point = getCanvasPoint(e)
+    if (!point) return
+
+    const el = canvasEl.value
+    if (!el) return
+
+    const bCtx = ensureBaseCanvas()
+    if (bCtx) {
+      bCtx.clearRect(0, 0, el.width, el.height)
+      bCtx.drawImage(el, 0, 0)
+      hasBaseSnapshot = true
+    }
+
+    isDrawing = true
+    isDirty.value = true
+    hasStrokes = true
+    snapshotBrush()
+    strokeProcessor = new StrokeProcessor(Math.max(1, strokeBrush!.radius / 2))
+    strokeProcessor.addPoint(point)
+    lastPoint = point
+
+    const ctx = ensureStrokeCanvas()
+    if (!ctx) return
+    ctx.save()
+    applyBrushStyle(ctx)
+    drawCircle(ctx, point)
+    ctx.restore()
+
+    compositeStrokeToMain(true)
+  }
+
+  function continueStroke(e: PointerEvent) {
+    if (!isDrawing || !strokeProcessor || !strokeCtx) return
+
+    const point = getCanvasPoint(e)
+    if (!point) return
+
+    const points = strokeProcessor.addPoint(point)
+    if (points.length === 0 && lastPoint) {
+      points.push(point)
+    }
+
+    if (points.length === 0) return
+
+    strokeCtx.save()
+    applyBrushStyle(strokeCtx)
+
+    let prev = lastPoint ?? points[0]
+    for (const p of points) {
+      drawSegment(strokeCtx, prev, p)
+      prev = p
+    }
+    lastPoint = prev
+
+    strokeCtx.restore()
+
+    compositeStrokeToMain(true)
+  }
+
+  function endStroke() {
+    if (!isDrawing || !strokeProcessor) return
+
+    const points = strokeProcessor.endStroke()
+    if (strokeCtx && points.length > 0) {
+      strokeCtx.save()
+      applyBrushStyle(strokeCtx)
+      let prev = lastPoint ?? points[0]
+      for (const p of points) {
+        drawSegment(strokeCtx, prev, p)
+        prev = p
+      }
+      strokeCtx.restore()
+    }
+
+    compositeStrokeToMain()
+
+    isDrawing = false
+    strokeProcessor = null
+    strokeBrush = null
+    lastPoint = null
+  }
+
+  function resizeCanvas() {
+    const el = canvasEl.value
+    if (!el) return
+
+    let tmp: HTMLCanvasElement | null = null
+    if (el.width > 0 && el.height > 0) {
+      tmp = document.createElement('canvas')
+      tmp.width = el.width
+      tmp.height = el.height
+      tmp.getContext('2d')!.drawImage(el, 0, 0)
+    }
+
+    el.width = canvasWidth.value
+    el.height = canvasHeight.value
+    mainCtx = null
+
+    if (tmp) {
+      getCtx()?.drawImage(tmp, 0, 0)
+    }
+
+    strokeCanvas = null
+    strokeCtx = null
+    baseCanvas = null
+    baseCtx = null
+    hasBaseSnapshot = false
+  }
+
+  function handleClear() {
+    const el = canvasEl.value
+    const ctx = getCtx()
+    if (!el || !ctx) return
+    ctx.clearRect(0, 0, el.width, el.height)
+    isDirty.value = true
+    hasStrokes = false
+  }
+
+  function updateCursorPos(e: PointerEvent) {
+    cursorX.value = e.offsetX
+    cursorY.value = e.offsetY
+  }
+
+  function handlePointerDown(e: PointerEvent) {
+    if (e.button !== 0) return
+    ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+    cacheCanvasRect()
+    updateCursorPos(e)
+    startStroke(e)
+  }
+
+  let pendingMoveEvent: PointerEvent | null = null
+  let rafId: number | null = null
+
+  function flushPendingStroke() {
+    if (pendingMoveEvent) {
+      continueStroke(pendingMoveEvent)
+      pendingMoveEvent = null
+    }
+    rafId = null
+  }
+
+  function handlePointerMove(e: PointerEvent) {
+    updateCursorPos(e)
+    if (!isDrawing) return
+
+    pendingMoveEvent = e
+    if (!rafId) {
+      rafId = requestAnimationFrame(flushPendingStroke)
+    }
+  }
+
+  function handlePointerUp(e: PointerEvent) {
+    if (e.button !== 0) return
+    if (rafId) {
+      cancelAnimationFrame(rafId)
+      flushPendingStroke()
+    }
+    ;(e.target as HTMLElement).releasePointerCapture(e.pointerId)
+    endStroke()
+  }
+
+  function handlePointerLeave() {
+    cursorVisible.value = false
+    if (rafId) {
+      cancelAnimationFrame(rafId)
+      flushPendingStroke()
+    }
+    endStroke()
+  }
+
+  function handlePointerEnter() {
+    cursorVisible.value = true
+  }
+
+  function handleInputImageLoad(e: Event) {
+    const img = e.target as HTMLImageElement
+    const widthWidget = getWidgetByName('width')
+    const heightWidget = getWidgetByName('height')
+    if (widthWidget) {
+      widthWidget.value = img.naturalWidth
+      widthWidget.callback?.(img.naturalWidth)
+    }
+    if (heightWidget) {
+      heightWidget.value = img.naturalHeight
+      heightWidget.callback?.(img.naturalHeight)
+    }
+    canvasWidth.value = img.naturalWidth
+    canvasHeight.value = img.naturalHeight
+  }
+
+  function parseMaskFilename(value: string): {
+    filename: string
+    subfolder: string
+    type: string
+  } | null {
+    const trimmed = value?.trim()
+    if (!trimmed) return null
+
+    const typeMatch = trimmed.match(/^(.+?) \[([^\]]+)\]$/)
+    const pathPart = typeMatch ? typeMatch[1] : trimmed
+    const type = typeMatch ? typeMatch[2] : 'input'
+
+    const lastSlash = pathPart.lastIndexOf('/')
+    const subfolder = lastSlash !== -1 ? pathPart.substring(0, lastSlash) : ''
+    const filename =
+      lastSlash !== -1 ? pathPart.substring(lastSlash + 1) : pathPart
+
+    return { filename, subfolder, type }
+  }
+
+  function isCanvasEmpty(): boolean {
+    return !hasStrokes
+  }
+
+  async function serializeValue(): Promise<string> {
+    const el = canvasEl.value
+    if (!el) return ''
+
+    if (isCanvasEmpty()) return ''
+
+    if (!isDirty.value) return modelValue.value
+
+    const blob = await new Promise<Blob | null>((resolve) =>
+      el.toBlob(resolve, 'image/png')
+    )
+    if (!blob) return modelValue.value
+
+    const name = `painter-${nodeId}-${Date.now()}.png`
+    const body = new FormData()
+    body.append('image', blob, name)
+    if (!isCloud) body.append('subfolder', 'painter')
+    body.append('type', isCloud ? 'input' : 'temp')
+
+    let resp: Response
+    try {
+      resp = await api.fetchApi('/upload/image', {
+        method: 'POST',
+        body
+      })
+    } catch (e) {
+      const err = t('painter.uploadError', {
+        status: 0,
+        statusText: e instanceof Error ? e.message : String(e)
+      })
+      toastStore.addAlert(err)
+      throw new Error(err)
+    }
+
+    if (resp.status !== 200) {
+      const err = t('painter.uploadError', {
+        status: resp.status,
+        statusText: resp.statusText
+      })
+      toastStore.addAlert(err)
+      throw new Error(err)
+    }
+
+    let data: { name: string }
+    try {
+      data = await resp.json()
+    } catch (e) {
+      const err = t('painter.uploadError', {
+        status: resp.status,
+        statusText: e instanceof Error ? e.message : String(e)
+      })
+      toastStore.addAlert(err)
+      throw new Error(err)
+    }
+
+    const result = isCloud
+      ? `${data.name} [input]`
+      : `painter/${data.name} [temp]`
+    modelValue.value = result
+    isDirty.value = false
+    return result
+  }
+
+  function registerWidgetSerialization() {
+    const node = litegraphNode.value
+    if (!node?.widgets) return
+    const targetWidget = node.widgets.find(
+      (w: IBaseWidget) => w.name === 'mask'
+    )
+    if (targetWidget) {
+      targetWidget.serializeValue = serializeValue
+    }
+  }
+
+  function restoreCanvas() {
+    const parsed = parseMaskFilename(modelValue.value)
+    if (!parsed) return
+
+    const params = new URLSearchParams()
+    params.set('filename', parsed.filename)
+    if (parsed.subfolder) params.set('subfolder', parsed.subfolder)
+    params.set('type', parsed.type)
+
+    const url = api.apiURL('/view?' + params.toString())
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.onload = () => {
+      const el = canvasEl.value
+      if (!el) return
+      canvasWidth.value = img.naturalWidth
+      canvasHeight.value = img.naturalHeight
+      mainCtx = null
+      getCtx()?.drawImage(img, 0, 0)
+      isDirty.value = false
+      hasStrokes = true
+    }
+    img.onerror = () => {
+      modelValue.value = ''
+    }
+    img.src = url
+  }
+
+  watch(() => nodeOutputStore.nodeOutputs, updateInputImageUrl, { deep: true })
+  watch(() => nodeOutputStore.nodePreviewImages, updateInputImageUrl, {
+    deep: true
+  })
+  watch([canvasWidth, canvasHeight], resizeCanvas)
+
+  watch(
+    [tool, brushSize, brushColor, brushOpacity, brushHardness],
+    saveSettingsToProperties
+  )
+
+  watch([canvasWidth, canvasHeight], syncCanvasSizeToWidgets)
+
+  watch(backgroundColor, syncBackgroundColorToWidget)
+
+  function initialize() {
+    syncCanvasSizeFromWidgets()
+    resizeCanvas()
+    registerWidgetSerialization()
+    restoreSettingsFromProperties()
+    updateInputImageUrl()
+    restoreCanvas()
+  }
+
+  onMounted(initialize)
+
+  onUnmounted(() => {
+    if (rafId) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+  })
+
+  return {
+    tool,
+    brushSize,
+    brushColor,
+    brushOpacity,
+    brushHardness,
+    backgroundColor,
+
+    canvasWidth,
+    canvasHeight,
+
+    cursorX,
+    cursorY,
+    cursorVisible,
+    displayBrushSize,
+
+    inputImageUrl,
+    isImageInputConnected,
+
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handlePointerEnter,
+    handlePointerLeave,
+
+    handleInputImageLoad,
+    handleClear
+  }
+}