[release] Increment version to 1.46.16

Backport of #13631 to `core/1.46`.

The auto-backport didn't fire for `core/1.46` because the label was
added post-merge (this mirrors the existing #13651 core/1.47 and #13652
cloud/1.47 backports of the same source PR).

## Crash it fixes
`core/1.46` (1.46.15) ships the same "Invalid linked format" crash:
`src/locales/en/nodeDefs.json` contains `@subject{subject_id}`, which
vue-i18n parses as an invalid linked message and crashes the app on
load.

The fix is defense-in-depth:
- **Generation-time escaping** — `escapeVueI18nMessageSyntax()` escapes
vue-i18n message-syntax chars (`@ { } | %`) in fields compiled via
`t()`/`st()` when collecting node defs, so the locale bundle is always
valid.
- **Runtime guard** — any vue-i18n compile error (custom nodes,
already-shipped bundles) degrades to the raw message instead of
crashing.

## Why now
This must land on `core/1.46` before it can be GA'd. It unblocks the
held ComfyUI bump (supersedes stale #14801) — 1.46 GA will become
1.46.16.

Co-authored-by: Connor Byrne <c.byrne@comfy.org>
Co-authored-by: xmarre <54859656+xmarre@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.github/actions/setup-frontend/action.yaml

@@ -29,3 +29,5 @@ runs:
       if: ${{ inputs.include_build_step == 'true' }}
       shell: bash
       run: pnpm build
+      env:
+        VITE_USE_LEGACY_DEFAULT_GRAPH: 'true'

.github/actions/upsert-comment-section/action.yaml

@@ -1,22 +1,21 @@
 name: Upsert Comment Section
 description: >
   Manage a consolidated PR comment with independently-updatable sections.
-  Multiple CI workflows can share the same comment by using the same
-  comment-marker and different section-names. Each workflow upserts only
-  its own section, leaving other sections intact.
+  All website CI workflows share the marker <!-- WEBSITE_CI_REPORT -->.
+  Valid section names: "e2e", "preview", "screenshot-update".
 
 inputs:
   pr-number:
     description: PR number to comment on
     required: true
   section-name:
-    description: 'Section identifier (e.g. "playwright", "storybook", "e2e", "preview")'
+    description: 'Section identifier: "e2e", "preview", or "screenshot-update"'
     required: true
   section-content:
     description: Markdown content for this section
     required: true
   comment-marker:
-    description: Top-level HTML comment marker shared by all sections in this comment
+    description: Top-level HTML comment marker (must be <!-- WEBSITE_CI_REPORT --> for all callers)
     required: true
   token:
     description: GitHub token with pull-requests write permission
@@ -39,10 +38,6 @@ runs:
           const sectionContent = process.env.INPUT_SECTION_CONTENT
           const commentMarker = process.env.INPUT_COMMENT_MARKER
 
-          if (!/^[a-z0-9-]+$/.test(sectionName)) {
-            throw new Error(`Invalid section-name: ${sectionName}`)
-          }
-
           const sectionStart = `<!-- section:${sectionName}:start -->`
           const sectionEnd = `<!-- section:${sectionName}:end -->`
           const sectionBlock = `${sectionStart}\n${sectionContent}\n${sectionEnd}`

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -109,27 +109,3 @@ jobs:
             exit 1
           fi
           echo '✅ No PostHog references found'
-
-      - name: Scan dist for Customer.io telemetry references
-        run: |
-          set -euo pipefail
-          echo '🔍 Scanning for Customer.io references...'
-          if rg --no-ignore -n \
-            -g '*.html' \
-            -g '*.js' \
-            -e 'CustomerIoTelemetryProvider' \
-            -e '@customerio/cdp-analytics-browser' \
-            -e 'customerio-gist-web' \
-            -e '(?i)cdp\.customer\.io' \
-            -e 'Comfy\.CustomerIo' \
-            dist; then
-            echo '❌ ERROR: Customer.io references found in dist assets!'
-            echo 'Customer.io must be properly tree-shaken from OSS builds.'
-            echo ''
-            echo 'To fix this:'
-            echo '1. Use the TelemetryProvider pattern (see src/platform/telemetry/)'
-            echo '2. Call telemetry via useTelemetry() hook'
-            echo '3. Use conditional dynamic imports behind isCloud checks'
-            exit 1
-          fi
-          echo '✅ No Customer.io references found'

.github/workflows/ci-tests-e2e-forks.yaml

@@ -38,15 +38,16 @@ jobs:
         id: pr
         uses: ./.github/actions/resolve-pr-from-workflow-run
 
-      - name: Handle Test Start — upsert playwright starting section
+      - name: Handle Test Start
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'requested'
-        uses: ./.github/actions/upsert-comment-section
-        with:
-          pr-number: ${{ steps.pr.outputs.number }}
-          section-name: playwright
-          section-content: '## 🎭 Playwright: ⏳ Running...'
-          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
-          token: ${{ github.token }}
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.number }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "starting"
 
       - name: Download and Deploy Reports
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed'
@@ -58,15 +59,13 @@ jobs:
           path: reports
           if_no_artifact_found: warn
 
-      - name: Handle Test Completion — deploy and generate section
+      - name: Handle Test Completion
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && hashFiles('reports/**') != ''
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
           GITHUB_SHA: ${{ github.event.workflow_run.head_sha }}
-          SUMMARY_FILE: playwright-section.md
-          BRANCH_NAME: ${{ github.event.workflow_run.head_branch }}
         run: |
           # Rename merged report if exists
           [ -d "reports/playwright-report-chromium-merged" ] && \
@@ -75,22 +74,5 @@ jobs:
           chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ steps.pr.outputs.number }}" \
-            "$BRANCH_NAME" \
+            "${{ github.event.workflow_run.head_branch }}" \
             "completed"
-
-      - name: Read playwright section
-        id: section
-        if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && hashFiles('playwright-section.md') != ''
-        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
-        with:
-          path: playwright-section.md
-
-      - name: Upsert playwright section into unified report
-        if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && steps.section.outputs.content != ''
-        uses: ./.github/actions/upsert-comment-section
-        with:
-          pr-number: ${{ steps.pr.outputs.number }}
-          section-name: playwright
-          section-content: ${{ steps.section.outputs.content }}
-          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
-          token: ${{ github.token }}

.github/workflows/ci-tests-e2e.yaml

@@ -47,6 +47,8 @@ jobs:
 
       - name: Build cloud frontend
         run: pnpm build:cloud
+        env:
+          VITE_USE_LEGACY_DEFAULT_GRAPH: 'true'
 
       - name: Upload cloud frontend
         uses: actions/upload-artifact@v6
@@ -224,7 +226,7 @@ jobs:
   # when using pull_request event, we have permission to comment directly
   # if its a forked repo, we need to use workflow_run event in a separate workflow (pr-playwright-deploy.yaml)
 
-  # Post starting section into the unified PR report comment for non-forked PRs
+  # Post starting comment for non-forked PRs
   comment-on-pr-start:
     needs: changes
     runs-on: ubuntu-latest
@@ -240,16 +242,17 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - name: Upsert playwright starting section into unified report
-        uses: ./.github/actions/upsert-comment-section
-        with:
-          pr-number: ${{ github.event.pull_request.number }}
-          section-name: playwright
-          section-content: '## 🎭 Playwright: ⏳ Running...'
-          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
-          token: ${{ github.token }}
+      - name: Post starting comment
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "starting"
 
-  # Deploy and upsert final playwright section for non-forked PRs only
+  # Deploy and comment for non-forked PRs only
   deploy-and-comment:
     needs: [changes, playwright-tests, merge-reports]
     runs-on: ubuntu-latest
@@ -273,34 +276,15 @@ jobs:
           pattern: playwright-report-*
           path: reports
 
-      - name: Deploy reports and generate section
+      - name: Deploy reports and comment on PR
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
           GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
-          SUMMARY_FILE: playwright-section.md
-          BRANCH_NAME: ${{ github.head_ref }}
         run: |
           bash ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
-            "$BRANCH_NAME" \
+            "${{ github.head_ref }}" \
             "completed"
-
-      - name: Read playwright section
-        id: section
-        if: ${{ !cancelled() && hashFiles('playwright-section.md') != '' }}
-        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
-        with:
-          path: playwright-section.md
-
-      - name: Upsert playwright section into unified report
-        if: ${{ !cancelled() && steps.section.outputs.content != '' }}
-        uses: ./.github/actions/upsert-comment-section
-        with:
-          pr-number: ${{ github.event.pull_request.number }}
-          section-name: playwright
-          section-content: ${{ steps.section.outputs.content }}
-          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
-          token: ${{ github.token }}
   #### END Deployment and commenting (non-forked PRs only)

.github/workflows/ci-tests-storybook-forks.yaml

@@ -38,15 +38,16 @@ jobs:
         id: pr
         uses: ./.github/actions/resolve-pr-from-workflow-run
 
-      - name: Handle Storybook Start — upsert storybook starting section
+      - name: Handle Storybook Start
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'requested'
-        uses: ./.github/actions/upsert-comment-section
-        with:
-          pr-number: ${{ steps.pr.outputs.number }}
-          section-name: storybook
-          section-content: '## 🎨 Storybook: 🚧 Building...'
-          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
-          token: ${{ github.token }}
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.number }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "starting"
 
       - name: Download and Deploy Storybook
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'
@@ -57,7 +58,7 @@ jobs:
           name: storybook-static
           path: storybook-static
 
-      - name: Handle Storybook Completion — deploy and generate section
+      - name: Handle Storybook Completion
         if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed'
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
@@ -65,28 +66,9 @@ jobs:
           GITHUB_TOKEN: ${{ github.token }}
           WORKFLOW_CONCLUSION: ${{ github.event.workflow_run.conclusion }}
           WORKFLOW_URL: ${{ github.event.workflow_run.html_url }}
-          SUMMARY_FILE: storybook-section.md
-          BRANCH_NAME: ${{ github.event.workflow_run.head_branch }}
         run: |
           chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ steps.pr.outputs.number }}" \
-            "$BRANCH_NAME" \
+            "${{ github.event.workflow_run.head_branch }}" \
             "completed"
-
-      - name: Read storybook section
-        id: section
-        if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && hashFiles('storybook-section.md') != ''
-        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
-        with:
-          path: storybook-section.md
-
-      - name: Upsert storybook section into unified report
-        if: steps.pr.outputs.skip != 'true' && github.event.action == 'completed' && steps.section.outputs.content != ''
-        uses: ./.github/actions/upsert-comment-section
-        with:
-          pr-number: ${{ steps.pr.outputs.number }}
-          section-name: storybook
-          section-content: ${{ steps.section.outputs.content }}
-          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
-          token: ${{ github.token }}

.github/workflows/ci-tests-storybook.yaml

@@ -37,14 +37,15 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - name: Upsert storybook starting section into unified report
-        uses: ./.github/actions/upsert-comment-section
-        with:
-          pr-number: ${{ github.event.pull_request.number }}
-          section-name: storybook
-          section-content: '## 🎨 Storybook: 🚧 Building...'
-          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
-          token: ${{ github.token }}
+      - name: Post starting comment
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "starting"
 
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:
@@ -163,38 +164,19 @@ jobs:
       - name: Make deployment script executable
         run: chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
 
-      - name: Deploy Storybook and generate section
+      - name: Deploy Storybook and comment on PR
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
           WORKFLOW_CONCLUSION: ${{ needs.storybook-build.outputs.conclusion }}
           WORKFLOW_URL: ${{ needs.storybook-build.outputs.workflow-url }}
-          SUMMARY_FILE: storybook-section.md
-          BRANCH_NAME: ${{ github.head_ref }}
         run: |
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
-            "$BRANCH_NAME" \
+            "${{ github.head_ref }}" \
             "completed"
 
-      - name: Read storybook section
-        id: section
-        if: hashFiles('storybook-section.md') != ''
-        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
-        with:
-          path: storybook-section.md
-
-      - name: Upsert storybook section into unified report
-        if: steps.section.outputs.content != ''
-        uses: ./.github/actions/upsert-comment-section
-        with:
-          pr-number: ${{ github.event.pull_request.number }}
-          section-name: storybook
-          section-content: ${{ steps.section.outputs.content }}
-          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
-          token: ${{ github.token }}
-
   # Deploy Storybook to production URL on main branch push
   deploy-production:
     runs-on: ubuntu-latest
@@ -226,17 +208,35 @@ jobs:
     permissions:
       pull-requests: write
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Upsert Chromatic section into unified report
-        uses: ./.github/actions/upsert-comment-section
+      - name: Update comment with Chromatic URLs
+        uses: actions/github-script@v8
         with:
-          pr-number: ${{ github.event.pull_request.number }}
-          section-name: chromatic
-          section-content: |
-            ### 🎨 Chromatic Visual Tests
-            - 📊 [View Chromatic Build](${{ needs.chromatic-deployment.outputs.chromatic-build-url }})
-            - 📚 [View Chromatic Storybook](${{ needs.chromatic-deployment.outputs.chromatic-storybook-url }})
-          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
-          token: ${{ github.token }}
+          script: |
+            const buildUrl = '${{ needs.chromatic-deployment.outputs.chromatic-build-url }}';
+            const storybookUrl = '${{ needs.chromatic-deployment.outputs.chromatic-storybook-url }}';
+
+            // Find the existing Storybook comment
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: ${{ github.event.pull_request.number }}
+            });
+
+            const storybookComment = comments.find(comment =>
+              comment.body.includes('<!-- STORYBOOK_BUILD_STATUS -->')
+            );
+
+            if (storybookComment && buildUrl && storybookUrl) {
+              // Append Chromatic info to existing comment
+              const updatedBody = storybookComment.body.replace(
+                /---\n(.*)$/s,
+                `---\n### 🎨 Chromatic Visual Tests\n- 📊 [View Chromatic Build](${buildUrl})\n- 📚 [View Chromatic Storybook](${storybookUrl})\n\n$1`
+              );
+
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: storybookComment.id,
+                body: updatedBody
+              });
+            }

.github/workflows/pr-cursor-review.yaml

@@ -1,55 +0,0 @@
-# Description: Team-gated multi-model Cursor review — a thin caller for the
-# reusable workflow in Comfy-Org/github-workflows, which is the single source of
-# truth for the panel, judge, prompts, and scripts. Triggered by the
-# 'cursor-review' label.
-#
-# Access control (team-only, two layers):
-#   1. Only users with triage permission or higher can apply a label in a public
-#      repo, so the public cannot trigger this.
-#   2. The reusable workflow's secret-bearing jobs do not run on fork PRs (forks
-#      get no secrets), so CURSOR_API_KEY is reachable only on internal branches.
-name: 'PR: Cursor Review'
-
-on:
-  pull_request:
-    types: [labeled, unlabeled]
-
-permissions:
-  contents: read
-  pull-requests: write
-
-concurrency:
-  # Re-labeling cancels an in-flight run for the same PR + label.
-  group: cursor-review-pr-${{ github.event.pull_request.number }}-${{ github.event.label.name }}
-  cancel-in-progress: true
-
-jobs:
-  cursor-review:
-    if: github.event.action == 'labeled' && github.event.label.name == 'cursor-review'
-    # SHA-pinned per zizmor `unpinned-uses: hash-pin`. Bump this SHA to pick up
-    # upstream changes; keep `workflows_ref` matching so prompts/scripts load
-    # from the same commit as the workflow definition.
-    uses: Comfy-Org/github-workflows/.github/workflows/cursor-review.yml@047ca48febe3a6647608ed2e0c4331b491cb9d6a # github-workflows#9
-    with:
-      # Overriding diff_excludes replaces the reusable default wholesale, so
-      # this restates the generated/vendored defaults and adds this repo's heavy
-      # paths (Playwright snapshots, generated manager types).
-      diff_excludes: >-
-        :!**/package-lock.json
-        :!**/yarn.lock
-        :!**/pnpm-lock.yaml
-        :!**/node_modules/**
-        :!**/.claude/**
-        :!**/dist/**
-        :!**/vendor/**
-        :!**/*.generated.*
-        :!**/*.min.js
-        :!**/*.min.css
-        :!**/*-snapshots/**
-        :!src/workbench/extensions/manager/types/generatedManagerTypes.ts
-      # Load the prompts/scripts from the same ref as `uses:`.
-      workflows_ref: 047ca48febe3a6647608ed2e0c4331b491cb9d6a
-    secrets:
-      CURSOR_API_KEY: ${{ secrets.CURSOR_API_KEY }}
-      # Optional — enables start/complete Slack DMs to the triggerer.
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

.github/workflows/pr-report.yaml

@@ -140,8 +140,6 @@ jobs:
             const legacyMarkers = [
               '<!-- COMFYUI_FRONTEND_SIZE -->',
               '<!-- COMFYUI_FRONTEND_PERF -->',
-              '<!-- PLAYWRIGHT_TEST_STATUS -->',
-              '<!-- STORYBOOK_BUILD_STATUS -->',
             ];
 
             const comments = await github.paginate(github.rest.issues.listComments, {
@@ -162,19 +160,11 @@ jobs:
               }
             }
 
-      - name: Read PR report
-        id: report
+      - name: Post PR comment
         if: steps.pr-meta.outputs.skip != 'true'
-        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
-        with:
-          path: ./pr-report.md
-
-      - name: Upsert bundle/perf/coverage section into unified report
-        if: steps.pr-meta.outputs.skip != 'true'
-        uses: ./.github/actions/upsert-comment-section
+        uses: ./.github/actions/post-pr-report-comment
         with:
           pr-number: ${{ steps.pr-meta.outputs.number }}
-          section-name: ci-metrics
-          section-content: ${{ steps.report.outputs.content }}
+          report-file: ./pr-report.md
           comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
           token: ${{ secrets.GITHUB_TOKEN }}

apps/website/src/i18n/translations.ts

@@ -1385,9 +1385,9 @@ const translations = {
     'zh-CN': '随时加购积分'
   },
   'pricing.included.feature5.description': {
-    en: 'Purchase additional credits at any time. Top-up credits are valid for 1 year from the date of purchase and do not roll over with your monthly plan.',
+    en: 'Purchase additional credits at any time. Unused top-ups roll over to the next month automatically for up to 1 year.',
     'zh-CN':
-      '可随时购买额外积分。充值积分自购买之日起 1 年内有效，且不会随月度计划结转。'
+      '可随时购买额外积分。未使用的充值积分自动结转至下月，最长保留 1 年。'
   },
   'pricing.included.feature6.title': {
     en: 'Pre-installed models',

browser_tests/assets/subgraphs/link-seed.json

@@ -1,436 +0,0 @@
-{
-  "id": "ca685f6a-7402-42cc-84ae-b659b06cc8b1",
-  "revision": 0,
-  "last_node_id": 10,
-  "last_link_id": 15,
-  "nodes": [
-    {
-      "id": 7,
-      "type": "CLIPTextEncode",
-      "pos": [497.59999999999985, 468.79999999999995],
-      "size": [510.328125, 216.71875],
-      "flags": {},
-      "order": 3,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 5
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "slot_index": 0,
-          "links": [12]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode"
-      },
-      "widgets_values": ["text, watermark"]
-    },
-    {
-      "id": 6,
-      "type": "CLIPTextEncode",
-      "pos": [499.9999999999999, 225.1999633789062],
-      "size": [507.40625, 197.171875],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 3
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "slot_index": 0,
-          "links": [11]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode"
-      },
-      "widgets_values": [
-        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
-      ]
-    },
-    {
-      "id": 5,
-      "type": "EmptyLatentImage",
-      "pos": [569.5999633789061, 732.7998535156249],
-      "size": [378, 144],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "slot_index": 0,
-          "links": [13]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "EmptyLatentImage"
-      },
-      "widgets_values": [512, 512, 1]
-    },
-    {
-      "id": 8,
-      "type": "VAEDecode",
-      "pos": [1452.7999999999997, 227.59999999999997],
-      "size": [252, 72],
-      "flags": {},
-      "order": 5,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "samples",
-          "type": "LATENT",
-          "link": 14
-        },
-        {
-          "name": "vae",
-          "type": "VAE",
-          "link": 8
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "slot_index": 0,
-          "links": [9]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "VAEDecode"
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 9,
-      "type": "SaveImage",
-      "pos": [1743.1999999999998, 228.79999999999995],
-      "size": [252, 84],
-      "flags": {},
-      "order": 6,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 9
-        }
-      ],
-      "outputs": [],
-      "properties": {},
-      "widgets_values": ["ComfyUI"]
-    },
-    {
-      "id": 4,
-      "type": "CheckpointLoaderSimple",
-      "pos": [33.20003662109363, 570.8],
-      "size": [378, 130.65625],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "MODEL",
-          "type": "MODEL",
-          "slot_index": 0,
-          "links": [10]
-        },
-        {
-          "name": "CLIP",
-          "type": "CLIP",
-          "slot_index": 1,
-          "links": [3, 5]
-        },
-        {
-          "name": "VAE",
-          "type": "VAE",
-          "slot_index": 2,
-          "links": [8]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CheckpointLoaderSimple"
-      },
-      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
-    },
-    {
-      "id": 10,
-      "type": "5526b801-03ef-4797-9052-cbc171512972",
-      "pos": [1145.277734375, 340.85618896484374],
-      "size": [225, 184],
-      "flags": {},
-      "order": 4,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": 10
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": 11
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": 12
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": 13
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": [14]
-        }
-      ],
-      "properties": {
-        "proxyWidgets": [["-1", "seed"]]
-      },
-      "widgets_values": [1]
-    }
-  ],
-  "links": [
-    [3, 4, 1, 6, 0, "CLIP"],
-    [5, 4, 1, 7, 0, "CLIP"],
-    [8, 4, 2, 8, 1, "VAE"],
-    [9, 8, 0, 9, 0, "IMAGE"],
-    [10, 4, 0, 10, 0, "MODEL"],
-    [11, 6, 0, 10, 1, "CONDITIONING"],
-    [12, 7, 0, 10, 2, "CONDITIONING"],
-    [13, 5, 0, 10, 3, "LATENT"],
-    [14, 10, 0, 8, 0, "LATENT"]
-  ],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "5526b801-03ef-4797-9052-cbc171512972",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 10,
-          "lastLinkId": 15,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [1031.12, 372.62745605468746, 120, 140]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [1772.7199999999998, 408.62745605468746, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "2a9d656b-f723-4cdd-897f-894835ce9c50",
-            "name": "model",
-            "type": "MODEL",
-            "linkIds": [1],
-            "localized_name": "model",
-            "pos": [1131.12, 392.62745605468746]
-          },
-          {
-            "id": "ea2d1491-db84-40fa-81e0-48008843ef25",
-            "name": "positive",
-            "type": "CONDITIONING",
-            "linkIds": [4],
-            "localized_name": "positive",
-            "pos": [1131.12, 412.62745605468746]
-          },
-          {
-            "id": "8e021d1a-2032-4dfc-84a3-b649831bd474",
-            "name": "negative",
-            "type": "CONDITIONING",
-            "linkIds": [6],
-            "localized_name": "negative",
-            "pos": [1131.12, 432.62745605468746]
-          },
-          {
-            "id": "977613a0-f164-4004-87a4-1f70ecca7c73",
-            "name": "latent_image",
-            "type": "LATENT",
-            "linkIds": [2],
-            "localized_name": "latent_image",
-            "pos": [1131.12, 452.62745605468746]
-          },
-          {
-            "id": "42ba848c-ab1d-4eab-9f86-3693f407e253",
-            "name": "seed",
-            "type": "INT",
-            "linkIds": [15],
-            "pos": [1131.12, 472.62745605468746]
-          }
-        ],
-        "outputs": [
-          {
-            "id": "73e0e3cd-90f1-4934-8278-2c5c64fd40f6",
-            "name": "LATENT",
-            "type": "LATENT",
-            "linkIds": [7],
-            "localized_name": "LATENT",
-            "pos": [1792.7199999999998, 428.62745605468746]
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 3,
-            "type": "KSampler",
-            "pos": [1247.1199707031249, 272.23994140624995],
-            "size": [453.59375, 380.765625],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "model",
-                "name": "model",
-                "type": "MODEL",
-                "link": 1
-              },
-              {
-                "localized_name": "positive",
-                "name": "positive",
-                "type": "CONDITIONING",
-                "link": 4
-              },
-              {
-                "localized_name": "negative",
-                "name": "negative",
-                "type": "CONDITIONING",
-                "link": 6
-              },
-              {
-                "localized_name": "latent_image",
-                "name": "latent_image",
-                "type": "LATENT",
-                "link": 2
-              },
-              {
-                "localized_name": "seed",
-                "name": "seed",
-                "type": "INT",
-                "widget": {
-                  "name": "seed"
-                },
-                "link": 15
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "slot_index": 0,
-                "links": [7]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "KSampler"
-            },
-            "widgets_values": [
-              156680208700286,
-              "increment",
-              20,
-              8,
-              "euler",
-              "normal",
-              1
-            ]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 3,
-            "target_slot": 0,
-            "type": "MODEL"
-          },
-          {
-            "id": 4,
-            "origin_id": -10,
-            "origin_slot": 1,
-            "target_id": 3,
-            "target_slot": 1,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 6,
-            "origin_id": -10,
-            "origin_slot": 2,
-            "target_id": 3,
-            "target_slot": 2,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 2,
-            "origin_id": -10,
-            "origin_slot": 3,
-            "target_id": 3,
-            "target_slot": 3,
-            "type": "LATENT"
-          },
-          {
-            "id": 7,
-            "origin_id": 3,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "LATENT"
-          },
-          {
-            "id": 15,
-            "origin_id": -10,
-            "origin_slot": 4,
-            "target_id": 3,
-            "target_slot": 4,
-            "type": "INT"
-          }
-        ],
-        "extra": {
-          "workflowRendererVersion": "Vue"
-        }
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    },
-    "workflowRendererVersion": "Vue",
-    "frontendVersion": "1.40.0"
-  },
-  "version": 0.4
-}

browser_tests/assets/subgraphs/proxy-seed.json

@@ -1,404 +0,0 @@
-{
-  "id": "ca685f6a-7402-42cc-84ae-b659b06cc8b1",
-  "revision": 0,
-  "last_node_id": 10,
-  "last_link_id": 14,
-  "nodes": [
-    {
-      "id": 7,
-      "type": "CLIPTextEncode",
-      "pos": [497.59999999999985, 468.79999999999995],
-      "size": [510.328125, 216.71875],
-      "flags": {},
-      "order": 3,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 5
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "slot_index": 0,
-          "links": [12]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode"
-      },
-      "widgets_values": ["text, watermark"]
-    },
-    {
-      "id": 6,
-      "type": "CLIPTextEncode",
-      "pos": [499.9999999999999, 225.1999633789062],
-      "size": [507.40625, 197.171875],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 3
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "slot_index": 0,
-          "links": [11]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode"
-      },
-      "widgets_values": [
-        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
-      ]
-    },
-    {
-      "id": 5,
-      "type": "EmptyLatentImage",
-      "pos": [569.5999633789061, 732.7998535156249],
-      "size": [378, 144],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "slot_index": 0,
-          "links": [13]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "EmptyLatentImage"
-      },
-      "widgets_values": [512, 512, 1]
-    },
-    {
-      "id": 8,
-      "type": "VAEDecode",
-      "pos": [1452.7999999999997, 227.59999999999997],
-      "size": [252, 72],
-      "flags": {},
-      "order": 5,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "samples",
-          "type": "LATENT",
-          "link": 14
-        },
-        {
-          "name": "vae",
-          "type": "VAE",
-          "link": 8
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "slot_index": 0,
-          "links": [9]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "VAEDecode"
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 9,
-      "type": "SaveImage",
-      "pos": [1743.1999999999998, 228.79999999999995],
-      "size": [252, 84],
-      "flags": {},
-      "order": 6,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 9
-        }
-      ],
-      "outputs": [],
-      "properties": {},
-      "widgets_values": ["ComfyUI"]
-    },
-    {
-      "id": 4,
-      "type": "CheckpointLoaderSimple",
-      "pos": [33.20003662109363, 570.8],
-      "size": [378, 130.65625],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "MODEL",
-          "type": "MODEL",
-          "slot_index": 0,
-          "links": [10]
-        },
-        {
-          "name": "CLIP",
-          "type": "CLIP",
-          "slot_index": 1,
-          "links": [3, 5]
-        },
-        {
-          "name": "VAE",
-          "type": "VAE",
-          "slot_index": 2,
-          "links": [8]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CheckpointLoaderSimple"
-      },
-      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
-    },
-    {
-      "id": 10,
-      "type": "5526b801-03ef-4797-9052-cbc171512972",
-      "pos": [1145.277734375, 340.85618896484374],
-      "size": [225, 184],
-      "flags": {},
-      "order": 4,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": 10
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": 11
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": 12
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": 13
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": [14]
-        }
-      ],
-      "properties": {
-        "proxyWidgets": [["3", "seed"]]
-      },
-      "widgets_values": []
-    }
-  ],
-  "links": [
-    [3, 4, 1, 6, 0, "CLIP"],
-    [5, 4, 1, 7, 0, "CLIP"],
-    [8, 4, 2, 8, 1, "VAE"],
-    [9, 8, 0, 9, 0, "IMAGE"],
-    [10, 4, 0, 10, 0, "MODEL"],
-    [11, 6, 0, 10, 1, "CONDITIONING"],
-    [12, 7, 0, 10, 2, "CONDITIONING"],
-    [13, 5, 0, 10, 3, "LATENT"],
-    [14, 10, 0, 8, 0, "LATENT"]
-  ],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "5526b801-03ef-4797-9052-cbc171512972",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 10,
-          "lastLinkId": 14,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [1031.12, 372.62745605468746, 120, 120]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [1772.7199999999998, 408.62745605468746, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "2a9d656b-f723-4cdd-897f-894835ce9c50",
-            "name": "model",
-            "type": "MODEL",
-            "linkIds": [1],
-            "localized_name": "model",
-            "pos": [1131.12, 392.62745605468746]
-          },
-          {
-            "id": "ea2d1491-db84-40fa-81e0-48008843ef25",
-            "name": "positive",
-            "type": "CONDITIONING",
-            "linkIds": [4],
-            "localized_name": "positive",
-            "pos": [1131.12, 412.62745605468746]
-          },
-          {
-            "id": "8e021d1a-2032-4dfc-84a3-b649831bd474",
-            "name": "negative",
-            "type": "CONDITIONING",
-            "linkIds": [6],
-            "localized_name": "negative",
-            "pos": [1131.12, 432.62745605468746]
-          },
-          {
-            "id": "977613a0-f164-4004-87a4-1f70ecca7c73",
-            "name": "latent_image",
-            "type": "LATENT",
-            "linkIds": [2],
-            "localized_name": "latent_image",
-            "pos": [1131.12, 452.62745605468746]
-          }
-        ],
-        "outputs": [
-          {
-            "id": "73e0e3cd-90f1-4934-8278-2c5c64fd40f6",
-            "name": "LATENT",
-            "type": "LATENT",
-            "linkIds": [7],
-            "localized_name": "LATENT",
-            "pos": [1792.7199999999998, 428.62745605468746]
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 3,
-            "type": "KSampler",
-            "pos": [1247.1199707031249, 272.23994140624995],
-            "size": [453.59375, 380.765625],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "model",
-                "name": "model",
-                "type": "MODEL",
-                "link": 1
-              },
-              {
-                "localized_name": "positive",
-                "name": "positive",
-                "type": "CONDITIONING",
-                "link": 4
-              },
-              {
-                "localized_name": "negative",
-                "name": "negative",
-                "type": "CONDITIONING",
-                "link": 6
-              },
-              {
-                "localized_name": "latent_image",
-                "name": "latent_image",
-                "type": "LATENT",
-                "link": 2
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "slot_index": 0,
-                "links": [7]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "KSampler"
-            },
-            "widgets_values": [1, "increment", 20, 8, "euler", "normal", 1]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 3,
-            "target_slot": 0,
-            "type": "MODEL"
-          },
-          {
-            "id": 4,
-            "origin_id": -10,
-            "origin_slot": 1,
-            "target_id": 3,
-            "target_slot": 1,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 6,
-            "origin_id": -10,
-            "origin_slot": 2,
-            "target_id": 3,
-            "target_slot": 2,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 2,
-            "origin_id": -10,
-            "origin_slot": 3,
-            "target_id": 3,
-            "target_slot": 3,
-            "type": "LATENT"
-          },
-          {
-            "id": 7,
-            "origin_id": 3,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "LATENT"
-          }
-        ],
-        "extra": {
-          "workflowRendererVersion": "Vue"
-        }
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    },
-    "workflowRendererVersion": "Vue",
-    "frontendVersion": "1.40.0"
-  },
-  "version": 0.4
-}

browser_tests/assets/subgraphs/zit-seed.json

@@ -1,439 +0,0 @@
-{
-  "id": "ca685f6a-7402-42cc-84ae-b659b06cc8b1",
-  "revision": 0,
-  "last_node_id": 10,
-  "last_link_id": 15,
-  "nodes": [
-    {
-      "id": 7,
-      "type": "CLIPTextEncode",
-      "pos": [498.26665242513025, 471.46666463216144],
-      "size": [510.328125, 252.71875],
-      "flags": {},
-      "order": 3,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 5
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "slot_index": 0,
-          "links": [12]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode"
-      },
-      "widgets_values": ["text, watermark"]
-    },
-    {
-      "id": 6,
-      "type": "CLIPTextEncode",
-      "pos": [500.66667683919275, 227.8666280110677],
-      "size": [507.40625, 233.171875],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 3
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "slot_index": 0,
-          "links": [11]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode"
-      },
-      "widgets_values": [
-        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
-      ]
-    },
-    {
-      "id": 5,
-      "type": "EmptyLatentImage",
-      "pos": [570.266591389974, 735.4665120442708],
-      "size": [378, 216],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "slot_index": 0,
-          "links": [13]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "EmptyLatentImage"
-      },
-      "widgets_values": [512, 512, 1]
-    },
-    {
-      "id": 8,
-      "type": "VAEDecode",
-      "pos": [1453.466512044271, 230.26666768391925],
-      "size": [252, 138],
-      "flags": {},
-      "order": 5,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "samples",
-          "type": "LATENT",
-          "link": 14
-        },
-        {
-          "name": "vae",
-          "type": "VAE",
-          "link": 8
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "slot_index": 0,
-          "links": [9]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "VAEDecode"
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 9,
-      "type": "SaveImage",
-      "pos": [1743.866658528646, 231.46666463216144],
-      "size": [252, 148],
-      "flags": {},
-      "order": 6,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 9
-        }
-      ],
-      "outputs": [],
-      "properties": {},
-      "widgets_values": ["ComfyUI"]
-    },
-    {
-      "id": 4,
-      "type": "CheckpointLoaderSimple",
-      "pos": [33.866689046223996, 573.4666951497395],
-      "size": [378, 196],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "MODEL",
-          "type": "MODEL",
-          "slot_index": 0,
-          "links": [10]
-        },
-        {
-          "name": "CLIP",
-          "type": "CLIP",
-          "slot_index": 1,
-          "links": [3, 5]
-        },
-        {
-          "name": "VAE",
-          "type": "VAE",
-          "slot_index": 2,
-          "links": [8]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CheckpointLoaderSimple"
-      },
-      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
-    },
-    {
-      "id": 10,
-      "type": "5526b801-03ef-4797-9052-cbc171512972",
-      "pos": [1145.9444173177085, 343.52284749348956],
-      "size": [225, 220],
-      "flags": {},
-      "order": 4,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": 10
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": 11
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": 12
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": 13
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": [14]
-        }
-      ],
-      "properties": {
-        "proxyWidgets": [
-          ["-1", "seed"],
-          ["3", "control_after_generate"]
-        ]
-      },
-      "widgets_values": [1]
-    }
-  ],
-  "links": [
-    [3, 4, 1, 6, 0, "CLIP"],
-    [5, 4, 1, 7, 0, "CLIP"],
-    [8, 4, 2, 8, 1, "VAE"],
-    [9, 8, 0, 9, 0, "IMAGE"],
-    [10, 4, 0, 10, 0, "MODEL"],
-    [11, 6, 0, 10, 1, "CONDITIONING"],
-    [12, 7, 0, 10, 2, "CONDITIONING"],
-    [13, 5, 0, 10, 3, "LATENT"],
-    [14, 10, 0, 8, 0, "LATENT"]
-  ],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "5526b801-03ef-4797-9052-cbc171512972",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 10,
-          "lastLinkId": 15,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [1031.12, 372.62745605468746, 120, 140]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [1772.7199999999998, 408.62745605468746, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "2a9d656b-f723-4cdd-897f-894835ce9c50",
-            "name": "model",
-            "type": "MODEL",
-            "linkIds": [1],
-            "localized_name": "model",
-            "pos": [1131.12, 392.62745605468746]
-          },
-          {
-            "id": "ea2d1491-db84-40fa-81e0-48008843ef25",
-            "name": "positive",
-            "type": "CONDITIONING",
-            "linkIds": [4],
-            "localized_name": "positive",
-            "pos": [1131.12, 412.62745605468746]
-          },
-          {
-            "id": "8e021d1a-2032-4dfc-84a3-b649831bd474",
-            "name": "negative",
-            "type": "CONDITIONING",
-            "linkIds": [6],
-            "localized_name": "negative",
-            "pos": [1131.12, 432.62745605468746]
-          },
-          {
-            "id": "977613a0-f164-4004-87a4-1f70ecca7c73",
-            "name": "latent_image",
-            "type": "LATENT",
-            "linkIds": [2],
-            "localized_name": "latent_image",
-            "pos": [1131.12, 452.62745605468746]
-          },
-          {
-            "id": "42ba848c-ab1d-4eab-9f86-3693f407e253",
-            "name": "seed",
-            "type": "INT",
-            "linkIds": [15],
-            "pos": [1131.12, 472.62745605468746]
-          }
-        ],
-        "outputs": [
-          {
-            "id": "73e0e3cd-90f1-4934-8278-2c5c64fd40f6",
-            "name": "LATENT",
-            "type": "LATENT",
-            "linkIds": [7],
-            "localized_name": "LATENT",
-            "pos": [1792.7199999999998, 428.62745605468746]
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 3,
-            "type": "KSampler",
-            "pos": [1247.1199707031249, 272.23994140624995],
-            "size": [453.59375, 380.765625],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "model",
-                "name": "model",
-                "type": "MODEL",
-                "link": 1
-              },
-              {
-                "localized_name": "positive",
-                "name": "positive",
-                "type": "CONDITIONING",
-                "link": 4
-              },
-              {
-                "localized_name": "negative",
-                "name": "negative",
-                "type": "CONDITIONING",
-                "link": 6
-              },
-              {
-                "localized_name": "latent_image",
-                "name": "latent_image",
-                "type": "LATENT",
-                "link": 2
-              },
-              {
-                "localized_name": "seed",
-                "name": "seed",
-                "type": "INT",
-                "widget": {
-                  "name": "seed"
-                },
-                "link": 15
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "slot_index": 0,
-                "links": [7]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "KSampler"
-            },
-            "widgets_values": [
-              156680208700286,
-              "increment",
-              20,
-              8,
-              "euler",
-              "normal",
-              1
-            ]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 3,
-            "target_slot": 0,
-            "type": "MODEL"
-          },
-          {
-            "id": 4,
-            "origin_id": -10,
-            "origin_slot": 1,
-            "target_id": 3,
-            "target_slot": 1,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 6,
-            "origin_id": -10,
-            "origin_slot": 2,
-            "target_id": 3,
-            "target_slot": 2,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 2,
-            "origin_id": -10,
-            "origin_slot": 3,
-            "target_id": 3,
-            "target_slot": 3,
-            "type": "LATENT"
-          },
-          {
-            "id": 7,
-            "origin_id": 3,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "LATENT"
-          },
-          {
-            "id": 15,
-            "origin_id": -10,
-            "origin_slot": 4,
-            "target_id": 3,
-            "target_slot": 4,
-            "type": "INT"
-          }
-        ],
-        "extra": {
-          "workflowRendererVersion": "Vue"
-        }
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    },
-    "workflowRendererVersion": "Vue",
-    "frontendVersion": "1.35.0"
-  },
-  "version": 0.4
-}

browser_tests/fixtures/helpers/TemplateHelper.ts

@@ -69,6 +69,24 @@ export class TemplateHelper {
   }
 
   async mockIndex(): Promise<void> {
+    const customTemplatesHandler = async (route: Route) => {
+      const customTemplates: Record<string, string[]> = {}
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify(customTemplates),
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store'
+        }
+      })
+    }
+    const customTemplatesPattern = '**/api/workflow_templates'
+    this.routeHandlers.push({
+      pattern: customTemplatesPattern,
+      handler: customTemplatesHandler
+    })
+    await this.page.route(customTemplatesPattern, customTemplatesHandler)
+
     const indexHandler = async (route: Route) => {
       const payload = this.index ?? mockTemplateIndex(this.templates)
       await route.fulfill({

browser_tests/fixtures/selectors.ts

@@ -113,6 +113,10 @@ export const TestIds = {
     root: 'properties-panel',
     errorsTab: 'panel-tab-errors'
   },
+  assets: {
+    browserModal: 'asset-browser-modal',
+    card: 'asset-card'
+  },
   subgraphEditor: {
     hiddenSection: 'subgraph-editor-hidden-section',
     iconEye: 'icon-eye',

browser_tests/fixtures/utils/promotedWidgets.ts

@@ -1,5 +1,6 @@
 import type { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
 
+import type { PromotedWidgetSource } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { parsePreviewExposures } from '@/core/schemas/previewExposureSchema'
 import type { PreviewExposure } from '@/core/schemas/previewExposureSchema'
 
@@ -7,13 +8,8 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 export type PromotedWidgetEntry = [string, string]
 
-interface ResolvedWidgetSource {
-  sourceNodeId: string
-  sourceWidgetName: string
-}
-
 function widgetSourceToEntry(
-  source: ResolvedWidgetSource
+  source: PromotedWidgetSource
 ): PromotedWidgetEntry {
   return [source.sourceNodeId, source.sourceWidgetName]
 }
@@ -24,22 +20,23 @@ function previewExposureToEntry(
   return [exposure.sourceNodeId, exposure.sourcePreviewName]
 }
 
+function isPromotedWidgetSource(value: unknown): value is PromotedWidgetSource {
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    'sourceNodeId' in value &&
+    'sourceWidgetName' in value &&
+    typeof value.sourceNodeId === 'string' &&
+    typeof value.sourceWidgetName === 'string'
+  )
+}
+
 function isNodeProperty(value: unknown): value is NodeProperty {
   if (value === null || value === undefined) return false
   const t = typeof value
   return t === 'string' || t === 'number' || t === 'boolean' || t === 'object'
 }
 
-/**
- * Reads the promoted widgets of a subgraph host node from the live graph.
- *
- * Promoted widgets are now store-backed: a host input is promoted iff it
- * carries a `widgetId`, and its interior source identity is resolved on demand
- * by walking the subgraph input link (mirroring `resolveSubgraphInputTarget`).
- * This intentionally avoids the removed `widget.sourceNodeId`/`sourceWidgetName`
- * denormalization, so the helper reflects the real projection rather than a
- * deleted widget-object contract.
- */
 export async function getPromotedWidgets(
   comfyPage: ComfyPage,
   nodeId: string
@@ -47,49 +44,21 @@ export async function getPromotedWidgets(
   const { widgetSources, previewExposures } = await comfyPage.page.evaluate(
     (id) => {
       const node = window.app!.canvas.graph!.getNodeById(id)
-      const previewExposures = node?.serialize()?.properties?.previewExposures
-      if (!node?.isSubgraphNode?.())
-        return { widgetSources: [], previewExposures }
-
-      const { subgraph } = node
-      const resolveSource = (
-        inputName: string
-      ): ResolvedWidgetSource | undefined => {
-        const inputSlot = subgraph.inputNode.slots.find(
-          (slot) => slot.name === inputName
-        )
-        if (!inputSlot) return undefined
-        for (const linkId of inputSlot.linkIds) {
-          const link = subgraph.getLink(linkId)
-          if (!link) continue
-          const { inputNode } = link.resolve(subgraph)
-          if (!inputNode || !Array.isArray(inputNode.inputs)) continue
-          const targetInput = inputNode.inputs.find(
-            (entry) => entry.link === linkId
-          )
-          if (!targetInput) continue
-          if (inputNode.isSubgraphNode?.()) {
-            return {
-              sourceNodeId: String(inputNode.id),
-              sourceWidgetName: targetInput.name
-            }
+      const widgetSources = (node?.widgets ?? []).flatMap((widget) => {
+        if (!('sourceNodeId' in widget) || !('sourceWidgetName' in widget))
+          return []
+        return [
+          {
+            sourceNodeId: widget.sourceNodeId,
+            sourceWidgetName: widget.sourceWidgetName
           }
-          const widget = inputNode.getWidgetFromSlot(targetInput)
-          if (!widget) continue
-          return {
-            sourceNodeId: String(inputNode.id),
-            sourceWidgetName: widget.name
-          }
-        }
-        return undefined
-      }
-
-      const widgetSources = (node.inputs ?? []).flatMap((input) => {
-        if (!input.widgetId) return []
-        const source = resolveSource(input.name)
-        return source ? [source] : []
+        ]
       })
-      return { widgetSources, previewExposures }
+      const serializedNode = node?.serialize()
+      return {
+        widgetSources,
+        previewExposures: serializedNode?.properties?.previewExposures
+      }
     },
     nodeId
   )
@@ -98,7 +67,7 @@ export async function getPromotedWidgets(
     ? parsePreviewExposures(previewExposures)
     : []
   return [
-    ...widgetSources.map(widgetSourceToEntry),
+    ...widgetSources.filter(isPromotedWidgetSource).map(widgetSourceToEntry),
     ...exposures.map(previewExposureToEntry)
   ]
 }

browser_tests/tests/baseTooltip.spec.ts

@@ -1,47 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-function tooltipLocator(page: Page): Locator {
-  return page.locator('[role="tooltip"]')
-}
-
-async function hoverAway(page: Page): Promise<void> {
-  await page.mouse.move(0, 0)
-}
-
-test.describe('BaseTooltip regression', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
-  test('Queue history button shows tooltip on hover', async ({ comfyPage }) => {
-    const queueButton = comfyPage.page.getByTestId('queue-overlay-toggle')
-    await queueButton.hover()
-
-    const tooltip = tooltipLocator(comfyPage.page)
-    await expect(tooltip).toBeVisible()
-
-    await hoverAway(comfyPage.page)
-    await expect(tooltip).not.toBeVisible()
-  })
-
-  test('Toggle properties panel button shows tooltip on hover', async ({
-    comfyPage
-  }) => {
-    const panelButton = comfyPage.page
-      .getByLabel(/Toggle properties panel/i)
-      .first()
-    await panelButton.hover()
-
-    const tooltip = tooltipLocator(comfyPage.page)
-    await expect(tooltip).toBeVisible()
-
-    await hoverAway(comfyPage.page)
-    await expect(tooltip).not.toBeVisible()
-  })
-})

browser_tests/tests/cloud-asset-promoted-widget.spec.ts

@@ -0,0 +1,99 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+import {
+  assetRequestIncludesTag,
+  createCloudAssetsFixture
+} from '@e2e/fixtures/assetApiFixture'
+import {
+  STABLE_CHECKPOINT,
+  STABLE_CHECKPOINT_2
+} from '@e2e/fixtures/data/assetFixtures'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+const WORKFLOW = 'missing/missing_model_promoted_widget'
+const HOST_NODE_ID = 2
+const WIDGET_NAME = 'ckpt_name'
+const SELECTED_MODEL = STABLE_CHECKPOINT_2.name
+
+const test = createCloudAssetsFixture([STABLE_CHECKPOINT, STABLE_CHECKPOINT_2])
+
+interface WidgetSnapshot {
+  type: string
+  value: string
+  hasLayout: boolean
+}
+
+async function getHostWidgetSnapshot(page: Page): Promise<WidgetSnapshot> {
+  return await page.evaluate(
+    ({ nodeId, widgetName }) => {
+      const node = window.app!.graph.getNodeById(nodeId)
+      const widget = node?.widgets?.find((widget) => widget.name === widgetName)
+
+      return {
+        type: widget?.type ?? '',
+        value: String(widget?.value ?? ''),
+        hasLayout: widget?.last_y != null
+      }
+    },
+    { nodeId: HOST_NODE_ID, widgetName: WIDGET_NAME }
+  )
+}
+
+test.describe(
+  'Promoted subgraph asset widgets',
+  { tag: ['@cloud', '@canvas', '@widget'] },
+  () => {
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.nodeOps.clearGraph()
+    })
+
+    test('legacy asset browser selection updates the promoted host widget value', async ({
+      cloudAssetRequests,
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.Assets.UseAssetAPI', true)
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+      await expect
+        .poll(
+          () =>
+            cloudAssetRequests.some((url) =>
+              assetRequestIncludesTag(url, 'checkpoints')
+            ),
+          { timeout: 10_000 }
+        )
+        .toBe(true)
+      await expect
+        .poll(() => getHostWidgetSnapshot(comfyPage.page))
+        .toMatchObject({
+          type: 'asset',
+          hasLayout: true
+        })
+      const initialWidget = await getHostWidgetSnapshot(comfyPage.page)
+      expect(initialWidget.value).not.toBe(SELECTED_MODEL)
+
+      const hostNode = await comfyPage.nodeOps.getNodeRefById(HOST_NODE_ID)
+      await hostNode.centerOnNode()
+      const promotedWidget = await hostNode.getWidgetByName(WIDGET_NAME)
+      await promotedWidget.click()
+
+      const modal = comfyPage.page.getByTestId(TestIds.assets.browserModal)
+      await expect(modal).toBeVisible()
+
+      const assetCard = modal
+        .getByTestId(TestIds.assets.card)
+        .filter({ hasText: SELECTED_MODEL })
+        .first()
+      await expect(assetCard).toBeVisible()
+      await assetCard.getByRole('button', { name: 'Use' }).click()
+
+      await expect(modal).toBeHidden()
+      await expect
+        .poll(() =>
+          getHostWidgetSnapshot(comfyPage.page).then((widget) => widget.value)
+        )
+        .toBe(SELECTED_MODEL)
+    })
+  }
+)

browser_tests/tests/maskEditorLoadSave.spec.ts

@@ -1,103 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { maskEditorTest as test } from '@e2e/fixtures/helpers/MaskEditorHelper'
-
-interface UploadResponse {
-  name: string
-  subfolder: string
-  type: 'input' | 'output' | 'temp'
-}
-
-const IMAGE_CANVAS_INDEX = 0
-const MASK_CANVAS_INDEX = 2
-
-const successResponse = (name: string): UploadResponse => ({
-  name,
-  subfolder: 'clipspace',
-  type: 'input'
-})
-
-const fulfillJson = (body: UploadResponse) => ({
-  status: 200,
-  contentType: 'application/json',
-  body: JSON.stringify(body)
-})
-
-test.describe('Mask Editor load/save', { tag: '@vue-nodes' }, () => {
-  test('Save with drawn mask uploads non-empty mask data', async ({
-    comfyPage,
-    maskEditor
-  }) => {
-    const dialog = await maskEditor.openDialog()
-    await maskEditor.drawStrokeAndExpectPixels(dialog)
-
-    let observedContentType = ''
-    let observedBodyLength = 0
-
-    await comfyPage.page.route('**/upload/mask', async (route) => {
-      const request = route.request()
-      observedContentType = (await request.headerValue('content-type')) ?? ''
-      observedBodyLength = request.postDataBuffer()?.byteLength ?? 0
-      await route.fulfill(
-        fulfillJson(successResponse('clipspace-mask-123.png'))
-      )
-    })
-
-    await comfyPage.page.route('**/upload/image', (route) =>
-      route.fulfill(fulfillJson(successResponse('clipspace-painted-123.png')))
-    )
-
-    await dialog.getByRole('button', { name: 'Save' }).click()
-    await expect(dialog).toBeHidden()
-    expect(observedContentType).toContain('multipart/form-data')
-    expect(observedBodyLength).toBeGreaterThan(256)
-  })
-
-  test('Canvas dimensions match the loaded image', async ({ maskEditor }) => {
-    const dialog = await maskEditor.openDialog()
-
-    const imageDimensions =
-      await maskEditor.getCanvasPixelData(IMAGE_CANVAS_INDEX)
-    const maskDimensions =
-      await maskEditor.getCanvasPixelData(MASK_CANVAS_INDEX)
-
-    expect(imageDimensions).not.toBeNull()
-    expect(maskDimensions).not.toBeNull()
-    expect(imageDimensions?.totalPixels).toBe(64 * 64)
-    expect(maskDimensions?.totalPixels).toBe(64 * 64)
-
-    await expect(dialog).toBeVisible()
-  })
-
-  test('Save failure on partial upload keeps dialog open', async ({
-    comfyPage,
-    maskEditor
-  }) => {
-    const dialog = await maskEditor.openDialog()
-    await maskEditor.drawStrokeAndExpectPixels(dialog)
-
-    // The saver uploads sequentially: mask layer first, then image layers.
-    // Let the mask upload succeed and the image upload fail to exercise both
-    // endpoints and verify the dialog stays open after a partial failure.
-    let maskUploadHit = false
-    let imageUploadHit = false
-    await comfyPage.page.route('**/upload/mask', (route) => {
-      maskUploadHit = true
-      return route.fulfill(
-        fulfillJson(successResponse('clipspace-mask-999.png'))
-      )
-    })
-    await comfyPage.page.route('**/upload/image', (route) => {
-      imageUploadHit = true
-      return route.fulfill({ status: 500 })
-    })
-
-    const saveButton = dialog.getByRole('button', { name: 'Save' })
-    await saveButton.click()
-
-    await expect.poll(() => maskUploadHit).toBe(true)
-    await expect.poll(() => imageUploadHit).toBe(true)
-    await expect(dialog).toBeVisible()
-    await expect(saveButton).toBeVisible()
-  })
-})

browser_tests/tests/nodeHelp.spec.ts

@@ -4,7 +4,6 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
-import type { WorkspaceStore } from '@e2e/types/globals'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 // TODO: there might be a better solution for this
@@ -35,56 +34,6 @@ async function openSelectionToolboxHelp(comfyPage: ComfyPage) {
   return comfyPage.page.getByTestId('properties-panel')
 }
 
-async function setLocaleAndWaitForWorkflowReload(
-  comfyPage: ComfyPage,
-  locale: string
-) {
-  await comfyPage.page.evaluate(async (targetLocale) => {
-    const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
-      .activeWorkflow
-
-    if (!workflow) {
-      throw new Error('No active workflow while waiting for locale reload')
-    }
-
-    const changeTracker = workflow.changeTracker.constructor as unknown as {
-      isLoadingGraph: boolean
-    }
-
-    let sawLoading = false
-    const waitForReload = new Promise<void>((resolve, reject) => {
-      const timeoutAt = performance.now() + 5000
-
-      const tick = () => {
-        if (changeTracker.isLoadingGraph) {
-          sawLoading = true
-        }
-
-        if (sawLoading && !changeTracker.isLoadingGraph) {
-          resolve()
-          return
-        }
-
-        if (performance.now() > timeoutAt) {
-          reject(
-            new Error(
-              `Timed out waiting for workflow reload after setting locale to ${targetLocale}`
-            )
-          )
-          return
-        }
-
-        requestAnimationFrame(tick)
-      }
-
-      tick()
-    })
-
-    await window.app!.extensionManager.setting.set('Comfy.Locale', targetLocale)
-    await waitForReload
-  }, locale)
-}
-
 test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
@@ -447,34 +396,33 @@ This is documentation for a custom node.
       await expect(helpPage.locator('img[alt="Safe Image"]')).toBeVisible()
     })
 
-    test('Should handle locale-specific documentation', async ({
-      comfyPage
-    }) => {
-      // Mock different responses for different locales
-      await comfyPage.page.route('**/docs/KSampler/ja.md', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: `# KSamplerノード
+    test.describe('Locale-specific documentation', () => {
+      test.use({ initialSettings: { 'Comfy.Locale': 'ja' } })
+
+      test('Should handle locale-specific documentation', async ({
+        comfyPage
+      }) => {
+        // Mock different responses for different locales
+        await comfyPage.page.route('**/docs/KSampler/ja.md', async (route) => {
+          await route.fulfill({
+            status: 200,
+            body: `# KSamplerノード
 
 これは日本語のドキュメントです。
 `
+          })
         })
-      })
 
-      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: `# KSampler Node
+        await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+          await route.fulfill({
+            status: 200,
+            body: `# KSampler Node
 
 This is English documentation.
 `
+          })
         })
-      })
 
-      // Set locale to Japanese
-      await setLocaleAndWaitForWorkflowReload(comfyPage, 'ja')
-
-      try {
         await comfyPage.workflow.loadWorkflow('default')
         const ksamplerNodes =
           await comfyPage.nodeOps.getNodeRefsByType('KSampler')
@@ -483,9 +431,7 @@ This is English documentation.
         const helpPage = await openSelectionToolboxHelp(comfyPage)
         await expect(helpPage).toContainText('KSamplerノード')
         await expect(helpPage).toContainText('これは日本語のドキュメントです')
-      } finally {
-        await setLocaleAndWaitForWorkflowReload(comfyPage, 'en')
-      }
+      })
     })
 
     test('Should handle network errors gracefully', async ({ comfyPage }) => {

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -143,7 +143,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
         const objectInfo = await response.json()
         const ckptName =
           objectInfo.CheckpointLoaderSimple.input.required.ckpt_name
-        ckptName[0] = [...ckptName[0], 'fake_model.safetensors']
+        ckptName[0] = [...ckptName[0], FAKE_MODEL_NAME]
         await route.fulfill({ response, json: objectInfo })
       })
 
@@ -151,21 +151,11 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
         const url = new URL(response.url())
         return url.pathname.endsWith('/object_info') && response.ok()
       })
-      const modelFoldersResponse = comfyPage.page.waitForResponse(
-        (response) => {
-          const url = new URL(response.url())
-          return url.pathname.endsWith('/experiment/models') && response.ok()
-        }
-      )
       const refreshButton = comfyPage.page.getByTestId(
         TestIds.dialogs.missingModelRefresh
       )
 
-      await Promise.all([
-        objectInfoResponse,
-        modelFoldersResponse,
-        refreshButton.click()
-      ])
+      await Promise.all([objectInfoResponse, refreshButton.click()])
       await expect(
         comfyPage.page.getByTestId(TestIds.dialogs.missingModelsGroup)
       ).toBeHidden()

browser_tests/tests/sidebar/assets.spec.ts

@@ -1105,3 +1105,56 @@ test.describe('Assets sidebar - drag and drop', () => {
     await expect.poll(() => fileComboWidget.getValue()).toBe('test.png [temp]')
   })
 })
+
+test('Insert as node', { tag: '@vue-nodes' }, async ({ comfyPage }) => {
+  await comfyPage.assets.mockOutputHistory([
+    createMockJob({
+      id: 'job1',
+      preview_output: {
+        filename: `1.png`,
+        type: 'temp',
+        nodeId: '1',
+        mediaType: 'images'
+      }
+    }),
+    createMockJob({
+      id: 'job2',
+      preview_output: {
+        filename: `2.png`,
+        type: 'output',
+        nodeId: '1',
+        mediaType: 'images'
+      }
+    }),
+    createMockJob({
+      id: 'job2',
+      preview_output: {
+        filename: `3.png`,
+        type: 'input',
+        nodeId: '1',
+        mediaType: 'images'
+      }
+    })
+  ])
+  const { assetsTab } = comfyPage.menu
+  await assetsTab.open()
+  await assetsTab.waitForAssets()
+  await expect(assetsTab.assetCards).toHaveCount(3)
+  for (const [index, expectedName] of [
+    [0, '1.png [temp]'],
+    [1, '2.png [output]'],
+    [2, '3.png']
+  ] as const) {
+    await comfyPage.nodeOps.clearGraph()
+    await assetsTab.assetCards.nth(index).scrollIntoViewIfNeeded()
+    await assetsTab.assetCards.nth(index).click({ button: 'right' })
+
+    await expect(comfyPage.contextMenu.primeVueMenu).toBeVisible()
+    await comfyPage.contextMenu.primeVueMenu.getByText('Insert as node').click()
+
+    await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(1)
+    const nodes = await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+    const fileWidget = await nodes[0].getWidget(0)
+    await expect.poll(() => fileWidget.getValue()).toBe(expectedName)
+  }
+})

browser_tests/tests/subgraph/subgraphNested.spec.ts

@@ -217,14 +217,6 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
         }
       })
 
-      // Each promoted input must surface its own source value, so assert the
-      // name->value mapping rather than the first textbox in DOM order.
-      const EXPECTED_VALUE_BY_INPUT: Record<string, RegExp> = {
-        value: /Inner 1/,
-        value_1: /Inner 2/,
-        value_1_1: /Inner 3/
-      }
-
       test('Promoted widgets from inner SubgraphNode are visible with correct values', async ({
         comfyPage
       }) => {
@@ -236,16 +228,11 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
         const widgets = outerNode.getByTestId(TestIds.widgets.widget)
         await comfyExpect(widgets).toHaveCount(4)
 
-        for (const [inputName, expectedValue] of Object.entries(
-          EXPECTED_VALUE_BY_INPUT
-        )) {
-          const valueWidget = outerNode.getByRole('textbox', {
-            name: inputName,
-            exact: true
-          })
-          await comfyExpect(valueWidget).toBeVisible()
-          await comfyExpect(valueWidget).toHaveValue(expectedValue)
-        }
+        const valueWidget = outerNode
+          .getByRole('textbox', { name: 'value' })
+          .first()
+        await comfyExpect(valueWidget).toBeVisible()
+        await comfyExpect(valueWidget).toHaveValue(/Inner 1/)
       })
 
       test('Promoted widgets from inner SubgraphNode carry correct source identity', async ({
@@ -284,16 +271,11 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
         const widgetsAfter = outerNodeAfter.getByTestId(TestIds.widgets.widget)
         await comfyExpect(widgetsAfter).toHaveCount(initialCount)
 
-        for (const [inputName, expectedValue] of Object.entries(
-          EXPECTED_VALUE_BY_INPUT
-        )) {
-          const valueWidget = outerNodeAfter.getByRole('textbox', {
-            name: inputName,
-            exact: true
-          })
-          await comfyExpect(valueWidget).toBeVisible()
-          await comfyExpect(valueWidget).toHaveValue(expectedValue)
-        }
+        const valueWidget = outerNodeAfter
+          .getByRole('textbox', { name: 'value' })
+          .first()
+        await comfyExpect(valueWidget).toBeVisible()
+        await comfyExpect(valueWidget).toHaveValue(/Inner 1/)
       })
     }
   )

browser_tests/tests/subgraph/subgraphPromotionDom.spec.ts

@@ -53,22 +53,6 @@ test.describe(
       await SubgraphHelper.expectWidgetBelowHeader(nodeLocator, seedWidget)
     })
 
-    test('Promoted textarea materializes once when a node is converted to a subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('default')
-
-      const clipNode = await comfyPage.nodeOps.getNodeRefById('6')
-      await clipNode.click('title')
-      const subgraphNode = await clipNode.convertToSubgraph()
-
-      const promotedTextarea = comfyPage.vueNodes
-        .getNodeLocator(String(subgraphNode.id))
-        .getByRole('textbox', { name: 'text', exact: true })
-      await expect(promotedTextarea).toHaveCount(1)
-      await expect(promotedTextarea).toBeVisible()
-    })
-
     test.describe(
       'Promoted Text Widget Lifecycle',
       { tag: ['@vue-nodes'] },

browser_tests/tests/subgraph/subgraphSeed.spec.ts

@@ -1,50 +0,0 @@
-import { mergeTests } from '@playwright/test'
-
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '@e2e/fixtures/ComfyPage'
-import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
-import { webSocketFixture } from '@e2e/fixtures/ws'
-
-const wstest = mergeTests(test, webSocketFixture)
-
-wstest(
-  'Seed handling',
-  { tag: '@vue-nodes' },
-  async ({ comfyPage, getWebSocket }) => {
-    const execution = new ExecutionHelper(comfyPage, await getWebSocket())
-
-    async function verifySeedControl(initializeState = true) {
-      const seedWidget = comfyPage.vueNodes.getWidgetByName('', 'seed')
-      const { input, valueControl } =
-        comfyPage.vueNodes.getInputNumberControls(seedWidget)
-
-      if (initializeState) {
-        await input.fill('1')
-        await valueControl.click()
-        await comfyPage.page.getByRole('radio', { name: 'increment' }).click()
-        await comfyPage.keyboard.press('Escape')
-      }
-
-      await execution.run()
-      await expect.soft(input).toHaveValue('2')
-    }
-
-    await test.step('seed updates on generation', async () => {
-      await verifySeedControl()
-    })
-
-    await test.step('subgraph seed updates on generation', async () => {
-      await comfyPage.subgraph.convertDefaultKSamplerToSubgraph()
-      await verifySeedControl()
-    })
-
-    for (const w of ['link-seed', 'proxy-seed', 'zit-seed']) {
-      await test.step(`seed updates for old workflow: ${w}`, async () => {
-        await comfyPage.workflow.loadWorkflow('subgraphs/' + w)
-        await verifySeedControl(false)
-      })
-    }
-  }
-)

browser_tests/tests/subgraph/subgraphSerialization.spec.ts

@@ -484,14 +484,6 @@ test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
         'subgraphs/subgraph-with-promoted-text-widget'
       )
 
-      // Assert against the visible textbox the user sees, not the internal
-      // graph/widget projection.
-      const promotedTextWidgets = comfyPage.page.getByRole('textbox', {
-        name: 'text',
-        exact: true
-      })
-      await comfyExpect(promotedTextWidgets).toHaveCount(1)
-
       const originalNode = await comfyPage.nodeOps.getNodeRefById('11')
       const originalPos = await originalNode.getPosition()
 
@@ -505,58 +497,31 @@ test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
         await comfyPage.page.keyboard.up('Alt')
       }
 
-      await comfyExpect(promotedTextWidgets).toHaveCount(2)
-    })
-
-    test(
-      'Cloning a subgraph node preserves edited promoted widget values on original and clone',
-      { tag: ['@vue-nodes'] },
-      async ({ comfyPage }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-
-        const editedValue = 'Edited prompt that must survive cloning'
-        const originalTextbox = comfyPage.vueNodes
-          .getNodeLocator('11')
-          .getByRole('textbox', { name: 'text' })
-        await expect(originalTextbox).toBeVisible()
-        await expect(originalTextbox).toHaveValue('')
-        await originalTextbox.fill(editedValue)
-
-        const originalNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await originalNode.click('title')
-        await comfyPage.clipboard.copy()
-        await comfyPage.clipboard.paste()
-
-        async function collectSubgraphNodeIds() {
-          return comfyPage.page.evaluate(() => {
-            const graph = window.app!.canvas.graph!
-            return graph.nodes
-              .filter(
-                (n) =>
-                  typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-              )
-              .map((n) => String(n.id))
-          })
-        }
-
-        await expect
-          .poll(async () => (await collectSubgraphNodeIds()).length)
-          .toBeGreaterThan(1)
-
-        const subgraphNodeIds = await collectSubgraphNodeIds()
-        for (const nodeId of subgraphNodeIds) {
-          const textbox = comfyPage.vueNodes
-            .getNodeLocator(nodeId)
-            .getByRole('textbox', { name: 'text' })
-          await expect(
-            textbox,
-            `node ${nodeId} promoted text widget reset to default after clone`
-          ).toHaveValue(editedValue)
-        }
+      async function collectSubgraphNodeIds() {
+        return comfyPage.page.evaluate(() => {
+          const graph = window.app!.canvas.graph!
+          return graph.nodes
+            .filter(
+              (n) =>
+                typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
+            )
+            .map((n) => String(n.id))
+        })
       }
-    )
+
+      await expect
+        .poll(async () => (await collectSubgraphNodeIds()).length)
+        .toBeGreaterThan(1)
+
+      const subgraphNodeIds = await collectSubgraphNodeIds()
+      for (const nodeId of subgraphNodeIds) {
+        const promotedWidgets = await getPromotedWidgets(comfyPage, nodeId)
+        expect(promotedWidgets.length).toBeGreaterThan(0)
+        expect(
+          promotedWidgets.some(([, widgetName]) => widgetName === 'text')
+        ).toBe(true)
+      }
+    })
   })
 
   test.describe('Duplicate ID Remapping', () => {

browser_tests/tests/templateFilteringCount.spec.ts

@@ -1,13 +1,13 @@
 import { expect, mergeTests } from '@playwright/test'
 
 import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
-import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { createCloudAssetsFixture } from '@e2e/fixtures/assetApiFixture'
 import { makeTemplate } from '@e2e/fixtures/data/templateFixtures'
 import { withTemplates } from '@e2e/fixtures/helpers/TemplateHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { templateApiFixture } from '@e2e/fixtures/templateApiFixture'
 
-const test = mergeTests(comfyPageFixture, templateApiFixture)
+const test = mergeTests(createCloudAssetsFixture([]), templateApiFixture)
 
 const Cloud = TemplateIncludeOnDistributionEnum.Cloud
 const Desktop = TemplateIncludeOnDistributionEnum.Desktop

browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts

@@ -8,7 +8,6 @@ import {
   getPromotedWidgetNames,
   getPromotedWidgetCountByName
 } from '@e2e/fixtures/utils/promotedWidgets'
-import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
 import { webSocketFixture } from '@e2e/fixtures/ws'
 const wstest = mergeTests(test, webSocketFixture)
 
@@ -140,46 +139,6 @@ test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
       )
     }
   )
-
-  wstest(
-    'Displays previews inside subgraphs received while workflow inactive',
-    async ({ comfyPage, getWebSocket }) => {
-      const execution = new ExecutionHelper(comfyPage, await getWebSocket())
-      const previewLocator = comfyPage.vueNodes.getNodeByTitle('Preview Image')
-      const previewImage = new VueNodeFixture(previewLocator)
-      const subgraphLocator = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
-      const subgraphNode = new VueNodeFixture(subgraphLocator)
-
-      await test.step('Add node', async () => {
-        await comfyPage.menu.topbar.newWorkflowButton.click()
-        await comfyPage.nextFrame()
-
-        await comfyPage.searchBoxV2.addNode('Preview Image')
-        await expect(previewImage.root).toBeVisible()
-      })
-
-      await test.step('Create subgraph', async () => {
-        await previewImage.title.click()
-        await comfyPage.page.keyboard.press('Control+Shift+e')
-        await expect(subgraphNode.root).toBeVisible()
-      })
-
-      await test.step('Inject Previews from different tab', async () => {
-        const jobId = await execution.run()
-        await comfyPage.menu.topbar.getTab(0).click()
-        await comfyPage.vueNodes.waitForNodes(7)
-
-        const images = [{ filename: 'example.png', type: 'input' }]
-        execution.executed(jobId, '2:1', { images })
-        await comfyPage.nextFrame()
-
-        await comfyPage.menu.topbar.getTab(1).click()
-        await comfyPage.vueNodes.waitForNodes(1)
-      })
-
-      await expect(subgraphNode.imagePreview.locator('img')).toHaveCount(1)
-    }
-  )
 })
 
 async function countColumns(locator: Locator) {

browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts

@@ -1,5 +1,3 @@
-import type { UploadImageResponse } from '@comfyorg/ingest-types'
-
 import {
   comfyExpect as expect,
   comfyPageFixture as test
@@ -25,42 +23,4 @@ test.describe('Vue Upload Widgets', { tag: '@vue-nodes' }, () => {
       )
       .toBeGreaterThan(0)
   })
-
-  test('shows a spinner during upload', async ({ comfyPage }) => {
-    let releaseUpload: () => void = () => {}
-    const uploadResponse: UploadImageResponse = { name: 'spinner-test.png' }
-
-    await comfyPage.page.route('**/upload/image', async (route) => {
-      await new Promise<void>((resolve) => {
-        releaseUpload = resolve
-      })
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(uploadResponse)
-      })
-    })
-    for (const nodeName of ['Load Image', 'Load Video', 'Load Audio']) {
-      await test.step(`for ${nodeName}`, async () => {
-        await comfyPage.menu.topbar.newWorkflowButton.click()
-        await comfyPage.nextFrame()
-        await comfyPage.searchBoxV2.addNode(nodeName)
-
-        const node = comfyPage.vueNodes.getNodeByTitle(nodeName)
-        const fileInput = node.locator('input[type="file"]')
-        const spinner = node.getByRole('status')
-
-        await expect(spinner).toBeHidden()
-        await fileInput.setInputFiles({
-          name: 'spinner-test.png',
-          mimeType: 'image/png',
-          buffer: Buffer.from('test')
-        })
-
-        await expect(spinner).toBeVisible()
-        releaseUpload()
-        await expect(spinner).toBeHidden()
-      })
-    }
-  })
 })

browser_tests/tests/workspaceSwitcher.spec.ts

@@ -98,43 +98,4 @@ test.describe('Workspace switcher', { tag: '@cloud' }, () => {
     expect(box).not.toBeNull()
     expect(box!.height).toBeLessThan(SINGLE_LINE_MAX_HEIGHT_PX)
   })
-
-  test('opens the switcher to the left of the profile menu without overlap', async ({
-    comfyPage
-  }) => {
-    const page = comfyPage.page
-
-    await comfyPage.toast.closeToasts()
-    await page.getByRole('button', { name: 'Current user' }).click()
-    await page.getByTestId('workspace-switcher-trigger').click()
-
-    const panel = page.getByTestId('workspace-switcher-panel')
-    await expect(panel).toBeVisible()
-
-    const profileMenu = page.locator('.current-user-popover')
-    const panelBox = await panel.boundingBox()
-    const profileBox = await profileMenu.boundingBox()
-    expect(panelBox).not.toBeNull()
-    expect(profileBox).not.toBeNull()
-    expect(panelBox!.x + panelBox!.width).toBeLessThanOrEqual(profileBox!.x)
-  })
-
-  test('opens the create-workspace dialog with DES-246 copy', async ({
-    comfyPage
-  }) => {
-    const page = comfyPage.page
-
-    await comfyPage.toast.closeToasts()
-    await page.getByRole('button', { name: 'Current user' }).click()
-    await page.getByTestId('workspace-switcher-trigger').click()
-
-    await page.getByText('Create a workspace').click()
-
-    await expect(
-      page.getByText(
-        'Workspaces keep your projects and files organized. Subscribe to a Team plan to invite members.'
-      )
-    ).toBeVisible()
-    await expect(page.getByPlaceholder('Ex: Comfy Org')).toBeVisible()
-  })
 })

codecov.yml

@@ -4,14 +4,3 @@ comment:
   require_changes: false
   require_base: false
   require_head: true
-
-# Carry forward the last known coverage for a flag when its upload is missing or
-# late. The `e2e` flag is uploaded by a separate workflow_run job that can fail
-# or arrive after Codecov has already computed the patch status; without this,
-# E2E-only code paths show up as patch misses and the patch status fails. See
-# https://docs.codecov.com/docs/carryforward-flags
-flags:
-  unit:
-    carryforward: true
-  e2e:
-    carryforward: true

global.d.ts

@@ -49,11 +49,6 @@ interface Window {
     posthog_project_token?: string
     posthog_api_host?: string
     posthog_config?: Record<string, unknown>
-    customer_io?: {
-      write_key?: string
-      site_id?: string
-      user_id?: string
-    }
     require_whitelist?: boolean
     subscription_required?: boolean
     max_upload_size?: number

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.47.2",
+  "version": "1.46.16",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -23,6 +23,7 @@
     "dev:desktop": "pnpm --filter @comfyorg/desktop-ui run dev",
     "dev:electron": "cross-env DISTRIBUTION=desktop vite --config vite.electron.config.mts",
     "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true vite --config vite.config.mts",
+    "dev:test": "cross-env VITE_USE_LEGACY_DEFAULT_GRAPH=true vite --config vite.config.mts",
     "dev": "vite --config vite.config.mts",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
     "format:check": "oxfmt --check",
@@ -66,7 +67,6 @@
     "@comfyorg/registry-types": "workspace:*",
     "@comfyorg/shared-frontend-utils": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
-    "@customerio/cdp-analytics-browser": "catalog:",
     "@formkit/auto-animate": "catalog:",
     "@iconify/json": "catalog:",
     "@primeuix/forms": "catalog:",
@@ -207,7 +207,7 @@
     "zod-to-json-schema": "catalog:"
   },
   "engines": {
-    "node": ">=25 <26",
+    "node": ">=25",
     "pnpm": ">=11.3"
   },
   "packageManager": "pnpm@11.3.0"

packages/shared-frontend-utils/src/formatUtil.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest'
 import {
   appendWorkflowJsonExt,
   ensureWorkflowSuffix,
+  escapeVueI18nMessageSyntax,
   formatLocalizedMediumDate,
   formatLocalizedNumber,
   getFilePathSeparatorVariants,
@@ -476,4 +477,49 @@ describe('formatUtil', () => {
       expect(formatLocalizedMediumDate('not a date', 'en')).toBe('—')
     })
   })
+
+  describe('escapeVueI18nMessageSyntax', () => {
+    it('escapes a literal @ that would break linked-message compilation', () => {
+      expect(
+        escapeVueI18nMessageSyntax('clips (tagged @Audio1-3 in the prompt)')
+      ).toBe("clips (tagged {'@'}Audio1-3 in the prompt)")
+    })
+
+    it('escapes @ in an email address', () => {
+      expect(escapeVueI18nMessageSyntax('support@comfy.org')).toBe(
+        "support{'@'}comfy.org"
+      )
+    })
+
+    it('escapes interpolation braces', () => {
+      expect(escapeVueI18nMessageSyntax('size {w}x{h}')).toBe(
+        "size {'{'}w{'}'}x{'{'}h{'}'}"
+      )
+    })
+
+    it('escapes the plural pipe separator', () => {
+      expect(escapeVueI18nMessageSyntax('foreground | background')).toBe(
+        "foreground {'|'} background"
+      )
+    })
+
+    it('escapes the modulo percent so it cannot re-form %{', () => {
+      expect(escapeVueI18nMessageSyntax('50%{done}')).toBe(
+        "50{'%'}{'{'}done{'}'}"
+      )
+    })
+
+    it('escapes every occurrence in a single pass', () => {
+      expect(escapeVueI18nMessageSyntax('@a @b @c')).toBe(
+        "{'@'}a {'@'}b {'@'}c"
+      )
+    })
+
+    it('leaves strings without syntax characters unchanged', () => {
+      expect(escapeVueI18nMessageSyntax('no special chars here')).toBe(
+        'no special chars here'
+      )
+      expect(escapeVueI18nMessageSyntax('')).toBe('')
+    })
+  })
 })

packages/shared-frontend-utils/src/formatUtil.ts

@@ -178,6 +178,40 @@ export function normalizeI18nKey(key: string) {
   return typeof key === 'string' ? key.replace(/\./g, '_') : ''
 }
 
+/**
+ * Characters that vue-i18n's message compiler treats as syntax in message text,
+ * so plain text has to escape them to render verbatim through `t()`/`st()`:
+ *
+ * - `@` starts a linked-message reference (`@:key`); malformed usage throws
+ *   `Invalid linked format`.
+ * - `{` / `}` delimit interpolation (`{name}`, `{'literal'}`); an unbalanced
+ *   brace throws `Unterminated/Unbalanced closing brace`.
+ * - `|` separates plural branches, so `a | b` silently renders as one branch.
+ * - `%` forms modulo interpolation when immediately followed by `{` (`%{name}`);
+ *   it must be escaped too, otherwise escaping a following `{` re-forms `%{`.
+ *
+ * The set is a build-inlined `const enum` (`TokenChars`) in
+ * `@intlify/message-compiler` and is not exported, so it is hardcoded here.
+ *
+ * @see https://vue-i18n.intlify.dev/guide/essentials/syntax (Special Characters, Literal interpolation)
+ * @see https://vue-i18n.intlify.dev/guide/essentials/pluralization
+ */
+const VUE_I18N_SYNTAX_CHARS = /[@{}|%]/g
+
+/**
+ * Escapes vue-i18n message-syntax characters as literal interpolations (`{'x'}`)
+ * so arbitrary text renders verbatim instead of being parsed as syntax. This is
+ * the only escape vue-i18n supports; see {@link VUE_I18N_SYNTAX_CHARS}.
+ *
+ * Only apply to values read through the compiler (`t()`/`st()`). Values read raw
+ * via `tm()`/`stRaw()` (e.g. node tooltips) must be left untouched, or the
+ * literal `{'x'}` would surface to users. Apply exactly once to raw text: the
+ * escape output itself contains `{`/`}`, so it is not idempotent.
+ */
+export function escapeVueI18nMessageSyntax(text: string): string {
+  return text.replace(VUE_I18N_SYNTAX_CHARS, (char) => `{'${char}'}`)
+}
+
 /**
  * Takes a dynamic prompt in the format {opt1|opt2|{optA|optB}|} and randomly replaces groups. Supports C style comments.
  * @param input The dynamic prompt to process

packages/tailwind-utils/src/index.ts

@@ -7,10 +7,7 @@ export type { ClassValue } from 'clsx'
 const twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
-      'font-size': ['text-xxs', 'text-xxxs'],
-      // tailwind-merge does not know Tailwind's `max-h-none`, so it never
-      // resolves conflicts like `max-h-[80vh] max-h-none` (both survive).
-      'max-h': [{ 'max-h': ['none'] }]
+      'font-size': ['text-xxs', 'text-xxxs']
     }
   }
 })

pnpm-lock.yaml

@@ -21,9 +21,6 @@ catalogs:
     '@comfyorg/comfyui-electron-types':
       specifier: 0.6.2
       version: 0.6.2
-    '@customerio/cdp-analytics-browser':
-      specifier: ^0.5.3
-      version: 0.5.3
     '@eslint/js':
       specifier: ^10.0.1
       version: 10.0.1
@@ -450,9 +447,6 @@ importers:
       '@comfyorg/tailwind-utils':
         specifier: workspace:*
         version: link:packages/tailwind-utils
-      '@customerio/cdp-analytics-browser':
-        specifier: 'catalog:'
-        version: 0.5.3
       '@formkit/auto-animate':
         specifier: 'catalog:'
         version: 0.9.0
@@ -1447,15 +1441,6 @@ packages:
     peerDependencies:
       postcss-selector-parser: ^7.0.0
 
-  '@customerio/cdp-analytics-browser@0.5.3':
-    resolution: {integrity: sha512-P4lBz+P2iCekq+DOETiAtSfdMyNVQd7OjXhocjffjPtyBJ0ADhpvYuNZAT9R+q2AFrDTx0m8cuyJAtEG+qiXPQ==}
-
-  '@customerio/cdp-analytics-core@0.5.3':
-    resolution: {integrity: sha512-mjR0dyzsX8UjMAh22bT5ByiIEYwtpnNhc9TlHTk2nGPhFnMctSsn9KuMXD9BmfSFcjdmTPg+iABOq68yyPBPHg==}
-
-  '@customerio/jist@0.1.8':
-    resolution: {integrity: sha512-MPiAm5rxu6+wQiEPwY+nV/5i7y67vJ0TvQpeQrOuATzWC45kgpu4YAJm+RlrpDOq35CK1C3utlPG/wI1F6ycXg==}
-
   '@cyberalien/svg-utils@1.2.15':
     resolution: {integrity: sha512-ZbKU6npzW5PNocdoLVJYfKzaP+c/RpT6JUkoaKrW1DOcw6lyXub8XtcNpI3xok6FnyNjS6ZbsrrtjTnS9yeZAQ==}
 
@@ -2397,14 +2382,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@lukeed/csprng@1.1.0':
-    resolution: {integrity: sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA==}
-    engines: {node: '>=8'}
-
-  '@lukeed/uuid@2.0.1':
-    resolution: {integrity: sha512-qC72D4+CDdjGqJvkFMMEAtancHUQ7/d/tAiHf64z8MopFDmcrtbcJuerDtFceuAfQJ2pDSfCKCtbqoGBNnwg0w==}
-    engines: {node: '>=8'}
-
   '@mdx-js/react@3.1.1':
     resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
     peerDependencies:
@@ -3298,18 +3275,6 @@ packages:
   '@rushstack/ts-command-line@5.3.1':
     resolution: {integrity: sha512-mid/JIZSJafwy3x9e4v0wVLuAqSSYYErEHV0HXPALYLSBN13YNkR5caOk0hf97lSRKrxhtvQjGaDKSEelR3sMg==}
 
-  '@segment/analytics.js-video-plugins@0.2.1':
-    resolution: {integrity: sha512-lZwCyEXT4aaHBLNK433okEKdxGAuyrVmop4BpQqQSJuRz0DglPZgd9B/XjiiWs1UyOankg2aNYMN3VcS8t4eSQ==}
-
-  '@segment/facade@3.4.10':
-    resolution: {integrity: sha512-xVQBbB/lNvk/u8+ey0kC/+g8pT3l0gCT8O2y9Z+StMMn3KAFAQ9w8xfgef67tJybktOKKU7pQGRPolRM1i1pdA==}
-
-  '@segment/isodate-traverse@1.1.1':
-    resolution: {integrity: sha512-+G6e1SgAUkcq0EDMi+SRLfT48TNlLPF3QnSgFGVs0V9F3o3fq/woQ2rHFlW20W0yy5NnCUH0QGU3Am2rZy/E3w==}
-
-  '@segment/isodate@1.0.3':
-    resolution: {integrity: sha512-BtanDuvJqnACFkeeYje7pWULVv8RgZaqKHWwGFnL/g/TH/CcZjkIVTfGDp/MAxmilYHUkrX70SqwnYSTNEaN7A==}
-
   '@sentry-internal/browser-utils@10.32.1':
     resolution: {integrity: sha512-sjLLep1es3rTkbtAdTtdpc/a6g7v7bK5YJiZJsUigoJ4NTiFeMI5uIDCxbH/tjJ1q23YE1LzVn7T96I+qBRjHA==}
     engines: {node: '>=18'}
@@ -5072,9 +5037,6 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
-  customerio-gist-web@3.23.2:
-    resolution: {integrity: sha512-oCM7WNEx/3cmEG1qQCKWrMwOtU+h41TTKJICNEb7Wj/1jR6+RJsj3b+3N+5u9TxgvUMusmLFvnVvqshU017eHA==}
-
   cva@1.0.0-beta.4:
     resolution: {integrity: sha512-F/JS9hScapq4DBVQXcK85l9U91M6ePeXoBMSp7vypzShoefUBxjQTo3g3935PUHgQd+IW77DjbPRIxugy4/GCQ==}
     peerDependencies:
@@ -6293,10 +6255,6 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  js-cookie@3.0.1:
-    resolution: {integrity: sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==}
-    engines: {node: '>=12'}
-
   js-cookie@3.0.7:
     resolution: {integrity: sha512-z/wZZgDrkNV1eA0ULjM/F9/50Ya8fbzgKneSpoPsXSGd0KnpdtHfOZWK+GcwLk+EZbS4F9RBhU+K2RgzuDaItw==}
     engines: {node: '>=20'}
@@ -6929,9 +6887,6 @@ packages:
     resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==}
     engines: {node: '>= 10'}
 
-  new-date@1.0.3:
-    resolution: {integrity: sha512-0fsVvQPbo2I18DT2zVHpezmeeNYV2JaJSrseiHLc17GNOxJzUdx5mvSigPu8LtIfZSij5i1wXnXFspEs2CD6hA==}
-
   nlcst-to-string@4.0.0:
     resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}
 
@@ -6981,9 +6936,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  obj-case@0.2.1:
-    resolution: {integrity: sha512-PquYBBTy+Y6Ob/O2574XHhDtHJlV1cJHMCgW+rDRc9J5hhmRelJB3k5dTK/3cVmFVtzvAKuENeuLpoyTzMzkOg==}
-
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -7824,9 +7776,6 @@ packages:
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
-  spark-md5@3.0.2:
-    resolution: {integrity: sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==}
-
   speakingurl@14.0.1:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
     engines: {node: '>=0.10.0'}
@@ -8226,12 +8175,6 @@ packages:
   unescape-js@1.1.4:
     resolution: {integrity: sha512-42SD8NOQEhdYntEiUQdYq/1V/YHwr1HLwlHuTJB5InVVdOSbgI6xu8jK5q65yIzuFCfczzyDF/7hbGzVbyCw0g==}
 
-  unfetch@3.1.2:
-    resolution: {integrity: sha512-L0qrK7ZeAudGiKYw6nzFjnJ2D5WHblUBwmHIqtPS6oKUd+Hcpk7/hKsSmcHsTlpd1TbTNsiRBUKRq3bHLNIqIw==}
-
-  unfetch@4.2.0:
-    resolution: {integrity: sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==}
-
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
@@ -8417,10 +8360,6 @@ packages:
     resolution: {integrity: sha512-vIYxrBCC/N/K+Js3qSN88go7kIfNPssr/hHCesKCQNAjmgvYS2oqr69kIufEG+O4+PfezOH4EbIeHCfFov8ZgQ==}
     hasBin: true
 
-  uuid@14.0.0:
-    resolution: {integrity: sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==}
-    hasBin: true
-
   valibot@1.2.0:
     resolution: {integrity: sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==}
     peerDependencies:
@@ -8701,8 +8640,8 @@ packages:
   vue-component-type-helpers@3.3.2:
     resolution: {integrity: sha512-l4Z2Y34m7nFMlx8vrslJaVtXxUpzgDMSESC7TakG/c5kwjYT/do+E0NcT2/vWDzaoIhsShg/2OKwX7Q4nbzC0g==}
 
-  vue-component-type-helpers@3.3.5:
-    resolution: {integrity: sha512-Fe1jyPJoUGpJOYKOri44jduR7My4yYINOMJISuMAbmrs+L5LbIDUc8NTWZYY3EJLK0yPLuCmcd5zoCsE4k2/KA==}
+  vue-component-type-helpers@3.3.4:
+    resolution: {integrity: sha512-joip1uZTaQR0nD23N400gIdJ7xY+WiiiMA/BCKz842gvGBknqDQAzklUvDEhqFvvrhQY8S2ZANBMu4X70VMFGw==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -9551,30 +9490,6 @@ snapshots:
     dependencies:
       postcss-selector-parser: 7.1.1
 
-  '@customerio/cdp-analytics-browser@0.5.3':
-    dependencies:
-      '@customerio/cdp-analytics-core': 0.5.3
-      '@lukeed/uuid': 2.0.1
-      '@segment/analytics.js-video-plugins': 0.2.1
-      '@segment/facade': 3.4.10
-      customerio-gist-web: 3.23.2
-      dset: 3.1.4
-      js-cookie: 3.0.1
-      node-fetch: 2.7.0
-      spark-md5: 3.0.2
-      tslib: 2.8.1
-      unfetch: 4.2.0
-    transitivePeerDependencies:
-      - encoding
-
-  '@customerio/cdp-analytics-core@0.5.3':
-    dependencies:
-      '@lukeed/uuid': 2.0.1
-      dset: 3.1.4
-      tslib: 2.8.1
-
-  '@customerio/jist@0.1.8': {}
-
   '@cyberalien/svg-utils@1.2.15':
     dependencies:
       '@iconify/types': 2.0.0
@@ -10535,12 +10450,6 @@ snapshots:
       - ws
       - zod
 
-  '@lukeed/csprng@1.1.0': {}
-
-  '@lukeed/uuid@2.0.1':
-    dependencies:
-      '@lukeed/csprng': 1.1.0
-
   '@mdx-js/react@3.1.1(@types/react@19.1.9)(react@19.2.4)':
     dependencies:
       '@types/mdx': 2.0.13
@@ -11170,23 +11079,6 @@ snapshots:
     transitivePeerDependencies:
       - '@types/node'
 
-  '@segment/analytics.js-video-plugins@0.2.1':
-    dependencies:
-      unfetch: 3.1.2
-
-  '@segment/facade@3.4.10':
-    dependencies:
-      '@segment/isodate-traverse': 1.1.1
-      inherits: 2.0.4
-      new-date: 1.0.3
-      obj-case: 0.2.1
-
-  '@segment/isodate-traverse@1.1.1':
-    dependencies:
-      '@segment/isodate': 1.0.3
-
-  '@segment/isodate@1.0.3': {}
-
   '@sentry-internal/browser-utils@10.32.1':
     dependencies:
       '@sentry/core': 10.32.1
@@ -11431,7 +11323,7 @@ snapshots:
       storybook: 10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       type-fest: 2.19.0
       vue: 3.5.34(typescript@5.9.3)
-      vue-component-type-helpers: 3.3.5
+      vue-component-type-helpers: 3.3.4
 
   '@swc/helpers@0.5.21':
     dependencies:
@@ -13211,11 +13103,6 @@ snapshots:
 
   csstype@3.2.3: {}
 
-  customerio-gist-web@3.23.2:
-    dependencies:
-      '@customerio/jist': 0.1.8
-      uuid: 14.0.0
-
   cva@1.0.0-beta.4(typescript@5.9.3):
     dependencies:
       clsx: 2.1.1
@@ -14588,8 +14475,6 @@ snapshots:
       js-cookie: 3.0.7
       nopt: 7.2.1
 
-  js-cookie@3.0.1: {}
-
   js-cookie@3.0.7: {}
 
   js-stringify@1.0.2: {}
@@ -15396,10 +15281,6 @@ snapshots:
 
   neotraverse@0.6.18: {}
 
-  new-date@1.0.3:
-    dependencies:
-      '@segment/isodate': 1.0.3
-
   nlcst-to-string@4.0.0:
     dependencies:
       '@types/nlcst': 2.0.3
@@ -15442,8 +15323,6 @@ snapshots:
       pathe: 2.0.3
       tinyexec: 1.0.4
 
-  obj-case@0.2.1: {}
-
   object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}
@@ -16561,8 +16440,6 @@ snapshots:
 
   space-separated-tokens@2.0.2: {}
 
-  spark-md5@3.0.2: {}
-
   speakingurl@14.0.1: {}
 
   sprintf-js@1.0.3: {}
@@ -16977,10 +16854,6 @@ snapshots:
     dependencies:
       string.fromcodepoint: 0.2.1
 
-  unfetch@3.1.2: {}
-
-  unfetch@4.2.0: {}
-
   unified@11.0.5:
     dependencies:
       '@types/unist': 3.0.3
@@ -17171,8 +17044,6 @@ snapshots:
 
   uuid@11.1.1: {}
 
-  uuid@14.0.0: {}
-
   valibot@1.2.0(typescript@5.9.3):
     optionalDependencies:
       typescript: 5.9.3
@@ -17598,7 +17469,7 @@ snapshots:
 
   vue-component-type-helpers@3.3.2: {}
 
-  vue-component-type-helpers@3.3.5: {}
+  vue-component-type-helpers@3.3.4: {}
 
   vue-demi@0.14.10(vue@3.5.34(typescript@5.9.3)):
     dependencies:

pnpm-workspace.yaml

@@ -15,7 +15,6 @@ catalog:
   '@astrojs/sitemap': ^3.7.3
   '@astrojs/vue': ^6.0.1
   '@comfyorg/comfyui-electron-types': 0.6.2
-  '@customerio/cdp-analytics-browser': ^0.5.3
   '@eslint/js': ^10.0.1
   '@formkit/auto-animate': ^0.9.0
   '@iconify-json/lucide': ^1.1.178

scripts/cicd/pr-playwright-deploy-and-comment.sh

@@ -1,13 +1,8 @@
 #!/bin/bash
 set -e
 
-# Deploy Playwright test reports to Cloudflare Pages and write section markdown.
+# Deploy Playwright test reports to Cloudflare Pages and comment on PR
 # Usage: ./pr-playwright-deploy-and-comment.sh <pr_number> <branch_name> <status>
-#
-# When SUMMARY_FILE env var is set, the generated markdown is written there
-# instead of posted as a standalone GitHub comment. The caller is then
-# responsible for upserting that content into the unified PR report via the
-# upsert-comment-section action.
 
 # Input validation
 # Validate PR number is numeric
@@ -108,28 +103,17 @@ deploy_report() {
     echo "failed"
 }
 
-# Post or update GitHub comment, or write to SUMMARY_FILE if set.
-# When SUMMARY_FILE is set, the caller (workflow) is responsible for upserting
-# the content into the unified PR report via upsert-comment-section.
-# The gh-api branch below is unused in CI (SUMMARY_FILE is always set there);
-# it is retained for local/standalone runs that post a comment directly.
+# Post or update GitHub comment
 post_comment() {
     body="$1"
-
-    if [ -n "${SUMMARY_FILE:-}" ]; then
-        printf '%s\n' "$body" > "$SUMMARY_FILE" || { echo "Failed to write $SUMMARY_FILE" >&2; exit 1; }
-        echo "Wrote playwright section to $SUMMARY_FILE" >&2
-        return
-    fi
-
     temp_file=$(mktemp)
     echo "$body" > "$temp_file"
-
+    
     if command -v gh > /dev/null 2>&1; then
         # Find existing comment ID
         existing=$(gh api "repos/$GITHUB_REPOSITORY/issues/$PR_NUMBER/comments" \
             --jq ".[] | select(.body | contains(\"$COMMENT_MARKER\")) | .id" | head -1)
-
+        
         if [ -n "$existing" ]; then
             # Update specific comment by ID
             gh api --method PATCH "repos/$GITHUB_REPOSITORY/issues/comments/$existing" \
@@ -142,20 +126,15 @@ post_comment() {
         echo "GitHub CLI not available, outputting comment:"
         cat "$temp_file"
     fi
-
+    
     rm -f "$temp_file"
 }
 
 # Main execution
 if [ "$STATUS" = "starting" ]; then
-    # When writing to SUMMARY_FILE, omit the standalone marker (the upsert
-    # action uses its own section delimiters).
-    if [ -n "${SUMMARY_FILE:-}" ]; then
-        comment="## 🎭 Playwright: ⏳ Running..."
-    else
-        comment="$COMMENT_MARKER
+    # Post concise starting comment
+    comment="$COMMENT_MARKER
 ## 🎭 Playwright: ⏳ Running..."
-    fi
     post_comment "$comment"
     
 else
@@ -302,14 +281,9 @@ else
         flaky_note=" · $total_flaky flaky"
     fi
     
-    # Generate compact single-line comment (omit standalone marker when writing
-    # to SUMMARY_FILE — the upsert action adds its own section delimiters).
-    if [ -n "${SUMMARY_FILE:-}" ]; then
-        comment="## 🎭 Playwright: $status_icon $total_passed passed, $total_failed failed$flaky_note"
-    else
-        comment="$COMMENT_MARKER
+    # Generate compact single-line comment
+    comment="$COMMENT_MARKER
 ## 🎭 Playwright: $status_icon $total_passed passed, $total_failed failed$flaky_note"
-    fi
 
     # Extract and display failed tests from all browsers (flaky tests are treated as passing)
     if [ $total_failed -gt 0 ]; then

scripts/cicd/pr-storybook-deploy-and-comment.sh

@@ -1,13 +1,8 @@
 #!/bin/bash
 set -e
 
-# Deploy Storybook to Cloudflare Pages and write section markdown.
+# Deploy Storybook to Cloudflare Pages and comment on PR
 # Usage: ./pr-storybook-deploy-and-comment.sh <pr_number> <branch_name> <status>
-#
-# When SUMMARY_FILE env var is set, the generated markdown is written there
-# instead of posted as a standalone GitHub comment. The caller is then
-# responsible for upserting that content into the unified PR report via the
-# upsert-comment-section action.
 
 # Input validation
 # Validate PR number is numeric
@@ -96,26 +91,17 @@ deploy_storybook() {
     echo "failed"
 }
 
-# Post or update GitHub comment, or write to SUMMARY_FILE if set.
-# When SUMMARY_FILE is set, the caller (workflow) is responsible for upserting
-# the content into the unified PR report via upsert-comment-section.
+# Post or update GitHub comment
 post_comment() {
     body="$1"
-
-    if [ -n "${SUMMARY_FILE:-}" ]; then
-        printf '%s\n' "$body" > "$SUMMARY_FILE" || { echo "Failed to write $SUMMARY_FILE" >&2; exit 1; }
-        echo "Wrote storybook section to $SUMMARY_FILE" >&2
-        return
-    fi
-
     temp_file=$(mktemp)
     echo "$body" > "$temp_file"
-
+    
     if command -v gh > /dev/null 2>&1; then
         # Find existing comment ID
         existing=$(gh api "repos/$GITHUB_REPOSITORY/issues/$PR_NUMBER/comments" \
             --jq ".[] | select(.body | contains(\"$COMMENT_MARKER\")) | .id" | head -1)
-
+        
         if [ -n "$existing" ]; then
             # Update specific comment by ID
             gh api --method PATCH "repos/$GITHUB_REPOSITORY/issues/comments/$existing" \
@@ -127,20 +113,15 @@ post_comment() {
         echo "GitHub CLI not available, outputting comment:"
         cat "$temp_file"
     fi
-
+    
     rm -f "$temp_file"
 }
 
 # Main execution
 if [ "$STATUS" = "starting" ]; then
-    # When writing to SUMMARY_FILE, omit the standalone marker (the upsert
-    # action uses its own section delimiters).
-    if [ -n "${SUMMARY_FILE:-}" ]; then
-        comment="## 🎨 Storybook: <img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> Building..."
-    else
-        comment="$COMMENT_MARKER
+    # Post starting comment
+    comment="$COMMENT_MARKER
 ## 🎨 Storybook: <img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> Building..."
-    fi
     post_comment "$comment"
     
 elif [ "$STATUS" = "completed" ]; then
@@ -216,18 +197,10 @@ elif [ "$STATUS" = "completed" ]; then
 
 </details>"
 
-    # Omit standalone marker when writing to SUMMARY_FILE — the upsert action
-    # adds its own section delimiters.
-    if [ -n "${SUMMARY_FILE:-}" ]; then
-        comment="$header
-
-$details"
-    else
-        comment="$COMMENT_MARKER
+    comment="$COMMENT_MARKER
 $header
 
 $details"
-    fi
-
+    
     post_comment "$comment"
-fi
+fi

scripts/collect-i18n-node-defs.ts

@@ -3,7 +3,10 @@ import * as fs from 'fs'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
-import { normalizeI18nKey } from '../packages/shared-frontend-utils/src/formatUtil'
+import {
+  escapeVueI18nMessageSyntax,
+  normalizeI18nKey
+} from '@/utils/formatUtil'
 import type { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
 
 const localePath = './src/locales/en/main.json'
@@ -44,8 +47,6 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
     }
   )
 
-  console.log(`Collected ${nodeDefs.length} node definitions`)
-
   const allDataTypesLocale = Object.fromEntries(
     nodeDefs
       .flatMap((nodeDef) => {
@@ -60,7 +61,7 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
         )
         return allDataTypes.map((dataType) => [
           normalizeI18nKey(dataType),
-          dataType
+          escapeVueI18nMessageSyntax(dataType)
         ])
       })
       .sort((a, b) => a[0].localeCompare(b[0]))
@@ -98,7 +99,10 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
         const runtimeWidgets = Object.fromEntries(
           Object.entries(widgetsMappings)
             .sort((a, b) => a[0].localeCompare(b[0]))
-            .map(([key, value]) => [normalizeI18nKey(key), { name: value }])
+            .map(([key, value]) => [
+              normalizeI18nKey(key),
+              { name: value ? escapeVueI18nMessageSyntax(value) : value }
+            ])
         )
 
         if (Object.keys(runtimeWidgets).length > 0) {
@@ -121,7 +125,10 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
   function extractInputs(nodeDef: ComfyNodeDefImpl) {
     const inputs = Object.fromEntries(
       Object.values(nodeDef.inputs).flatMap((input) => {
-        const name = input.name
+        const name =
+          input.name === undefined
+            ? undefined
+            : escapeVueI18nMessageSyntax(input.name)
         const tooltip = input.tooltip
 
         if (name === undefined && tooltip === undefined) {
@@ -146,7 +153,10 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
     const outputs = Object.fromEntries(
       nodeDef.outputs.flatMap((output, i) => {
         // Ignore data types if they are already translated in allDataTypesLocale.
-        const name = output.name in allDataTypesLocale ? undefined : output.name
+        const name =
+          output.name === undefined || output.name in allDataTypesLocale
+            ? undefined
+            : escapeVueI18nMessageSyntax(output.name)
         const tooltip = output.tooltip
 
         if (name === undefined && tooltip === undefined) {
@@ -179,8 +189,12 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
         return [
           normalizeI18nKey(nodeDef.name),
           {
-            display_name: nodeDef.display_name ?? nodeDef.name,
-            description: nodeDef.description || undefined,
+            display_name: escapeVueI18nMessageSyntax(
+              nodeDef.display_name ?? nodeDef.name
+            ),
+            description: nodeDef.description
+              ? escapeVueI18nMessageSyntax(nodeDef.description)
+              : undefined,
             inputs: Object.keys(inputs).length > 0 ? inputs : undefined,
             outputs: extractOutputs(nodeDef)
           }
@@ -192,7 +206,10 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
     nodeDefs.flatMap((nodeDef) =>
       nodeDef.category
         .split('/')
-        .map((category) => [normalizeI18nKey(category), category])
+        .map((category) => [
+          normalizeI18nKey(category),
+          escapeVueI18nMessageSyntax(category)
+        ])
     )
   )
 

scripts/perf-report.ts

@@ -316,16 +316,12 @@ function renderFullReport(
     lines.push(
       `⚠️ **${flaggedRows.length} regression${flaggedRows.length > 1 ? 's' : ''} detected**`,
       '',
-      '<details><summary>Show regressions</summary>',
-      '',
       ...tableHeader,
       ...flaggedRows,
-      '',
-      '</details>',
       ''
     )
   } else {
-    lines.push('✅ No regressions detected.', '')
+    lines.push('No regressions detected.', '')
   }
 
   lines.push(
@@ -397,8 +393,6 @@ function renderColdStartReport(
   lines.push(
     `> ℹ️ Collecting baseline variance data (${historicalCount}/15 runs). Significance will appear after 2 main branch runs.`,
     '',
-    '<details><summary>All metrics (cold start)</summary>',
-    '',
     '| Metric | Baseline | PR | Δ |',
     '|--------|----------|-----|---|'
   )
@@ -436,7 +430,6 @@ function renderColdStartReport(
     }
   }
 
-  lines.push('', '</details>')
   return lines
 }
 
@@ -445,10 +438,7 @@ function renderNoBaselineReport(
 ): string[] {
   const lines: string[] = []
   lines.push(
-    '> ℹ️ No baseline found — significance unavailable.',
-    '',
-    '<details><summary>Absolute values</summary>',
-    '',
+    'No baseline found — showing absolute values.\n',
     '| Metric | Value |',
     '|--------|-------|'
   )
@@ -459,7 +449,6 @@ function renderNoBaselineReport(
       lines.push(`| ${testName}: ${label} | ${formatValue(prVal, unit)} |`)
     }
   }
-  lines.push('', '</details>')
   return lines
 }
 

src/App.vue

@@ -1,15 +1,12 @@
 <template>
-  <TooltipProvider :delay-duration="300" disable-hoverable-content>
-    <router-view />
-    <GlobalDialog />
-    <BlockUI full-screen :blocked="isLoading" />
-  </TooltipProvider>
+  <router-view />
+  <GlobalDialog />
+  <BlockUI full-screen :blocked="isLoading" />
 </template>
 
 <script setup lang="ts">
 import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
-import { TooltipProvider } from 'reka-ui'
 import { computed, onMounted, watch } from 'vue'
 
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'

src/components/TopMenuSection.test.ts

@@ -132,7 +132,6 @@ function createWrapper({
     global: {
       plugins: [pinia, i18n],
       stubs: {
-        BaseTooltip: { template: '<slot />' },
         SubgraphBreadcrumb: true,
         QueueProgressOverlay: true,
         QueueInlineProgressSummary: true,
@@ -146,6 +145,9 @@ function createWrapper({
             '<div data-testid="context-menu" :data-model="JSON.stringify(model)" />'
         },
         ...stubs
+      },
+      directives: {
+        tooltip: () => {}
       }
     }
   }

src/components/TopMenuSection.vue

@@ -16,23 +16,22 @@
             v-if="managerState.shouldShowManagerButtons.value"
             class="pointer-events-auto flex h-12 shrink-0 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
           >
-            <BaseTooltip :text="t('menu.manageExtensions')" side="bottom">
-              <Button
-                variant="secondary"
-                :aria-label="t('menu.manageExtensions')"
-                class="relative"
-                @click="openCustomNodeManager"
-              >
-                <i class="icon-[comfy--extensions-blocks] size-4" />
-                <span class="not-md:hidden">
-                  {{ t('menu.manageExtensions') }}
-                </span>
-                <span
-                  v-if="shouldShowRedDot"
-                  class="absolute top-0.5 right-1 size-2 rounded-full bg-red-500"
-                />
-              </Button>
-            </BaseTooltip>
+            <Button
+              v-tooltip.bottom="customNodesManagerTooltipConfig"
+              variant="secondary"
+              :aria-label="t('menu.manageExtensions')"
+              class="relative"
+              @click="openCustomNodeManager"
+            >
+              <i class="icon-[comfy--extensions-blocks] size-4" />
+              <span class="not-md:hidden">
+                {{ t('menu.manageExtensions') }}
+              </span>
+              <span
+                v-if="shouldShowRedDot"
+                class="absolute top-0.5 right-1 size-2 rounded-full bg-red-500"
+              />
+            </Button>
           </div>
 
           <div ref="actionbarContainerRef" :class="actionbarContainerClass">
@@ -54,43 +53,35 @@
               class="shrink-0"
             />
             <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
-            <BaseTooltip
+            <Button
               v-if="isCloud && flags.workflowSharingEnabled"
-              :text="t('actionbar.shareTooltip')"
-              side="bottom"
+              v-tooltip.bottom="shareTooltipConfig"
+              variant="secondary"
+              :aria-label="t('actionbar.shareTooltip')"
+              @click="() => openShareDialog().catch(toastErrorHandler)"
+              @pointerenter="prefetchShareDialog"
             >
-              <Button
-                variant="secondary"
-                :aria-label="t('actionbar.shareTooltip')"
-                @click="() => openShareDialog().catch(toastErrorHandler)"
-                @pointerenter="prefetchShareDialog"
-              >
-                <i class="icon-[comfy--send] size-4" />
-                <span class="not-md:hidden">
-                  {{ t('actionbar.share') }}
-                </span>
-              </Button>
-            </BaseTooltip>
+              <i class="icon-[comfy--send] size-4" />
+              <span class="not-md:hidden">
+                {{ t('actionbar.share') }}
+              </span>
+            </Button>
             <div v-if="!isRightSidePanelOpen" class="relative">
-              <BaseTooltip
-                :text="t('rightSidePanel.togglePanel')"
-                side="bottom"
+              <Button
+                v-tooltip.bottom="rightSidePanelTooltipConfig"
+                :class="
+                  cn(
+                    showErrorIndicatorOnPanelButton &&
+                      'outline-1 outline-destructive-background'
+                  )
+                "
+                variant="secondary"
+                size="icon"
+                :aria-label="t('rightSidePanel.togglePanel')"
+                @click="openRightSidePanel"
               >
-                <Button
-                  :class="
-                    cn(
-                      showErrorIndicatorOnPanelButton &&
-                        'outline-1 outline-destructive-background'
-                    )
-                  "
-                  variant="secondary"
-                  size="icon"
-                  :aria-label="t('rightSidePanel.togglePanel')"
-                  @click="openRightSidePanel"
-                >
-                  <i class="icon-[lucide--panel-right] size-4" />
-                </Button>
-              </BaseTooltip>
+                <i class="icon-[lucide--panel-right] size-4" />
+              </Button>
               <StatusBadge
                 v-if="showErrorIndicatorOnPanelButton"
                 variant="dot"
@@ -155,7 +146,7 @@ import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { app } from '@/scripts/app'
@@ -261,6 +252,12 @@ const inlineProgressSummaryTarget = computed(() => {
 const shouldHideInlineProgressSummary = computed(
   () => isQueueProgressOverlayEnabled.value && isQueueOverlayExpanded.value
 )
+const customNodesManagerTooltipConfig = computed(() =>
+  buildTooltipConfig(t('menu.manageExtensions'))
+)
+const shareTooltipConfig = computed(() =>
+  buildTooltipConfig(t('actionbar.shareTooltip'))
+)
 
 const shouldShowRedDot = computed((): boolean => {
   return shouldShowConflictRedDot.value
@@ -282,6 +279,9 @@ const showErrorIndicatorOnPanelButton = computed(
 
 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
+const rightSidePanelTooltipConfig = computed(() =>
+  buildTooltipConfig(t('rightSidePanel.togglePanel'))
+)
 
 function openRightSidePanel() {
   useTelemetry()?.trackUiButtonClicked({

src/components/actionbar/ComfyActionbar.test.ts

@@ -36,7 +36,6 @@ const renderActionbar = (showRunProgressBar: boolean) => {
     global: {
       plugins: [pinia, i18n],
       stubs: {
-        BaseTooltip: { template: '<slot />' },
         ContextMenu: {
           name: 'ContextMenu',
           template: '<div />'
@@ -51,6 +50,9 @@ const renderActionbar = (showRunProgressBar: boolean) => {
           template: '<button type="button">Run</button>'
         },
         QueueInlineProgress: true
+      },
+      directives: {
+        tooltip: () => {}
       }
     }
   })

src/components/actionbar/ComfyActionbar.vue

@@ -32,49 +32,47 @@
         <Suspense @resolve="comfyRunButtonResolved">
           <ComfyRunButton />
         </Suspense>
-        <BaseTooltip :text="t('menu.interrupt')" side="bottom">
-          <Button
-            variant="destructive"
-            size="icon"
-            :disabled="isExecutionIdle"
-            :aria-label="t('menu.interrupt')"
-            @click="cancelCurrentJob"
-          >
-            <i class="icon-[lucide--x] size-4" />
-          </Button>
-        </BaseTooltip>
-        <BaseTooltip :text="queueHistoryTooltipText" side="bottom">
-          <Button
-            variant="secondary"
-            size="md"
-            :aria-pressed="
+        <Button
+          v-tooltip.bottom="cancelJobTooltipConfig"
+          variant="destructive"
+          size="icon"
+          :disabled="isExecutionIdle"
+          :aria-label="t('menu.interrupt')"
+          @click="cancelCurrentJob"
+        >
+          <i class="icon-[lucide--x] size-4" />
+        </Button>
+        <Button
+          v-tooltip.bottom="queueHistoryTooltipConfig"
+          variant="secondary"
+          size="md"
+          :aria-pressed="
+            isQueuePanelV2Enabled
+              ? activeSidebarTabId === 'job-history'
+              : queueOverlayExpanded
+          "
+          class="relative px-3"
+          data-testid="queue-overlay-toggle"
+          @click="toggleQueueOverlay"
+          @contextmenu.stop.prevent="showQueueContextMenu"
+        >
+          <span class="text-sm font-normal tabular-nums">
+            {{ activeJobsLabel }}
+          </span>
+          <StatusBadge
+            v-if="activeJobsCount > 0"
+            data-testid="active-jobs-indicator"
+            variant="dot"
+            class="pointer-events-none absolute -top-0.5 -right-0.5 animate-pulse"
+          />
+          <span class="sr-only">
+            {{
               isQueuePanelV2Enabled
-                ? activeSidebarTabId === 'job-history'
-                : queueOverlayExpanded
-            "
-            class="relative px-3"
-            data-testid="queue-overlay-toggle"
-            @click="toggleQueueOverlay"
-            @contextmenu.stop.prevent="showQueueContextMenu"
-          >
-            <span class="text-sm font-normal tabular-nums">
-              {{ activeJobsLabel }}
-            </span>
-            <StatusBadge
-              v-if="activeJobsCount > 0"
-              data-testid="active-jobs-indicator"
-              variant="dot"
-              class="pointer-events-none absolute -top-0.5 -right-0.5 animate-pulse"
-            />
-            <span class="sr-only">
-              {{
-                isQueuePanelV2Enabled
-                  ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
-                  : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
-              }}
-            </span>
-          </Button>
-        </BaseTooltip>
+                ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
+                : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+            }}
+          </span>
+        </Button>
         <ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
       </div>
     </Panel>
@@ -110,7 +108,7 @@ import StatusBadge from '@/components/common/StatusBadge.vue'
 import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
-import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
@@ -366,11 +364,16 @@ watch(isDragging, (dragging) => {
   }
 })
 
-const queueHistoryTooltipText = computed(() =>
-  t(
-    isQueuePanelV2Enabled.value
-      ? 'sideToolbar.queueProgressOverlay.viewJobHistory'
-      : 'sideToolbar.queueProgressOverlay.expandCollapsedQueue'
+const cancelJobTooltipConfig = computed(() =>
+  buildTooltipConfig(t('menu.interrupt'))
+)
+const queueHistoryTooltipConfig = computed(() =>
+  buildTooltipConfig(
+    t(
+      isQueuePanelV2Enabled.value
+        ? 'sideToolbar.queueProgressOverlay.viewJobHistory'
+        : 'sideToolbar.queueProgressOverlay.expandCollapsedQueue'
+    )
   )
 )
 const activeJobsLabel = computed(() => {

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.test.ts

@@ -1,69 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
-
-import CloudRunButtonWrapper from './CloudRunButtonWrapper.vue'
-
-const mockIsActiveSubscription = ref(true)
-
-vi.mock('@/composables/billing/useBillingContext', () => ({
-  useBillingContext: () => ({
-    isActiveSubscription: mockIsActiveSubscription
-  })
-}))
-
-vi.mock('@/components/actionbar/ComfyRunButton/ComfyQueueButton.vue', () => ({
-  default: {
-    name: 'ComfyQueueButton',
-    template: '<div data-testid="queue-button" />'
-  }
-}))
-
-vi.mock('@/platform/cloud/subscription/components/SubscribeToRun.vue', () => ({
-  default: {
-    name: 'SubscribeToRun',
-    template: '<div data-testid="subscribe-to-run-button" />'
-  }
-}))
-
-function renderWrapper() {
-  return render(CloudRunButtonWrapper)
-}
-
-describe('CloudRunButtonWrapper', () => {
-  beforeEach(() => {
-    mockIsActiveSubscription.value = true
-  })
-
-  it('renders the runnable queue button when the subscription is active', () => {
-    renderWrapper()
-
-    expect(screen.getByTestId('queue-button')).toBeInTheDocument()
-    expect(
-      screen.queryByTestId('subscribe-to-run-button')
-    ).not.toBeInTheDocument()
-  })
-
-  it('locks the run button when the subscription is inactive', () => {
-    mockIsActiveSubscription.value = false
-    renderWrapper()
-
-    expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
-    expect(screen.queryByTestId('queue-button')).not.toBeInTheDocument()
-  })
-
-  it('unlocks the run button once the subscription becomes active again', async () => {
-    mockIsActiveSubscription.value = false
-    renderWrapper()
-
-    expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
-
-    mockIsActiveSubscription.value = true
-    await nextTick()
-
-    expect(screen.getByTestId('queue-button')).toBeInTheDocument()
-    expect(
-      screen.queryByTestId('subscribe-to-run-button')
-    ).not.toBeInTheDocument()
-  })
-})

src/components/boundingBoxes/WidgetBoundingBoxes.test.ts

@@ -0,0 +1,224 @@
+/* eslint-disable testing-library/no-container, testing-library/no-node-access, testing-library/prefer-user-event */
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import WidgetBoundingBoxes from './WidgetBoundingBoxes.vue'
+import boundingBoxes from '@/locales/en/main.json'
+import type { BoundingBox } from '@/types/boundingBoxes'
+
+const { appState } = vi.hoisted(() => ({ appState: { node: null as unknown } }))
+
+vi.mock('@/scripts/app', () => ({
+  app: { canvas: { graph: { getNodeById: () => appState.node } } }
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      boundingBoxes: boundingBoxes.boundingBoxes,
+      palette: { swatchTitle: 'Edit', addColor: 'Add' }
+    }
+  }
+})
+
+const box = (over: Partial<BoundingBox> = {}): BoundingBox => ({
+  x: 51,
+  y: 51,
+  width: 256,
+  height: 256,
+  metadata: { type: 'obj', text: '', desc: '', palette: ['#ff0000'] },
+  ...over
+})
+
+const fakeCtx = {
+  measureText: (s: string) => ({ width: s.length * 7 }),
+  setTransform: () => {},
+  clearRect: () => {},
+  fillRect: () => {},
+  strokeRect: () => {},
+  fillText: () => {},
+  drawImage: () => {},
+  save: () => {},
+  restore: () => {},
+  beginPath: () => {},
+  rect: () => {},
+  clip: () => {},
+  font: '',
+  fillStyle: '',
+  strokeStyle: '',
+  lineWidth: 0
+} as unknown as CanvasRenderingContext2D
+
+function prepCanvas(canvas: HTMLCanvasElement) {
+  Object.defineProperty(canvas, 'clientWidth', {
+    value: 100,
+    configurable: true
+  })
+  Object.defineProperty(canvas, 'clientHeight', {
+    value: 100,
+    configurable: true
+  })
+  canvas.getContext = (() =>
+    fakeCtx) as unknown as HTMLCanvasElement['getContext']
+  canvas.getBoundingClientRect = () =>
+    ({
+      left: 0,
+      top: 0,
+      right: 100,
+      bottom: 100,
+      width: 100,
+      height: 100,
+      x: 0,
+      y: 0,
+      toJSON: () => ({})
+    }) as DOMRect
+  canvas.setPointerCapture = () => {}
+  canvas.releasePointerCapture = () => {}
+}
+
+function renderWidget(modelValue: BoundingBox[]) {
+  const result = render(WidgetBoundingBoxes, {
+    props: { nodeId: '1', modelValue },
+    global: { plugins: [i18n] }
+  })
+  const canvas = screen.getByTestId('bounding-boxes').querySelector('canvas')!
+  prepCanvas(canvas)
+  return { ...result, canvas }
+}
+
+const lastBoxes = (emitted: () => Record<string, unknown[][]>) => {
+  const calls = emitted()['update:modelValue']
+  return calls[calls.length - 1][0] as BoundingBox[]
+}
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  appState.node = {
+    widgets: [
+      { name: 'width', value: 512 },
+      { name: 'height', value: 512 }
+    ],
+    findInputSlot: () => -1,
+    getInputNode: () => null
+  }
+  vi.stubGlobal('requestAnimationFrame', () => 1)
+  vi.stubGlobal('cancelAnimationFrame', () => {})
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('WidgetBoundingBoxes', () => {
+  it('renders the canvas and editor shell', () => {
+    renderWidget([])
+    expect(
+      screen.getByTestId('bounding-boxes').querySelector('canvas')
+    ).not.toBeNull()
+  })
+
+  it('shows the region editor panel when a region is active', () => {
+    renderWidget([box()])
+    expect(screen.getByText('obj')).toBeTruthy()
+    expect(screen.getByText('text')).toBeTruthy()
+  })
+
+  it('reveals the text field after switching the region to text', async () => {
+    renderWidget([box()])
+    expect(
+      screen.queryByPlaceholderText('text to render (verbatim)')
+    ).toBeNull()
+    await userEvent.click(screen.getByText('text'))
+    expect(
+      screen.getByPlaceholderText('text to render (verbatim)')
+    ).toBeTruthy()
+  })
+
+  it('clears all regions via the clear button', async () => {
+    const { emitted } = renderWidget([box()])
+    await userEvent.click(screen.getByText('Clear all'))
+    expect(lastBoxes(emitted)).toEqual([])
+  })
+
+  it('draws a region through canvas pointer events', async () => {
+    const { canvas, emitted } = renderWidget([])
+    await fireEvent.pointerDown(canvas, {
+      button: 0,
+      clientX: 10,
+      clientY: 10,
+      pointerId: 1
+    })
+    await fireEvent.pointerMove(canvas, {
+      clientX: 60,
+      clientY: 60,
+      pointerId: 1
+    })
+    await fireEvent.pointerUp(canvas, {
+      clientX: 60,
+      clientY: 60,
+      pointerId: 1
+    })
+    expect(lastBoxes(emitted)).toHaveLength(1)
+  })
+
+  it('tracks focus and blur on the canvas', async () => {
+    const { canvas } = renderWidget([box()])
+    await fireEvent.focus(canvas)
+    await fireEvent.blur(canvas)
+    expect(canvas).toBeTruthy()
+  })
+
+  it('opens an inline editor on double click', async () => {
+    const { canvas, container } = renderWidget([box()])
+    await fireEvent.dblClick(canvas, { clientX: 30, clientY: 30 })
+    expect(container.querySelector('textarea')).not.toBeNull()
+  })
+
+  it('syncs description edits back to the model', async () => {
+    const { emitted } = renderWidget([box()])
+    await fireEvent.update(
+      screen.getByPlaceholderText('description of this region'),
+      'a caption'
+    )
+    expect(lastBoxes(emitted)[0].metadata.desc).toBe('a caption')
+  })
+
+  it('edits the text field once the region is a text region', async () => {
+    const { emitted } = renderWidget([box()])
+    await userEvent.click(screen.getByText('text'))
+    await fireEvent.update(
+      screen.getByPlaceholderText('text to render (verbatim)'),
+      'hello'
+    )
+    expect(lastBoxes(emitted)[0].metadata.text).toBe('hello')
+  })
+
+  it('deletes the active region with the Delete key', async () => {
+    const { canvas, emitted } = renderWidget([box()])
+    await fireEvent.keyDown(canvas, { key: 'Delete' })
+    expect(lastBoxes(emitted)).toEqual([])
+  })
+
+  it('clears hover state on pointer leave', async () => {
+    const { canvas } = renderWidget([
+      box({ x: 10, y: 10, width: 256, height: 256 })
+    ])
+    await fireEvent.pointerMove(canvas, { clientX: 15, clientY: 15 })
+    await fireEvent.pointerLeave(canvas)
+    expect(canvas).toBeTruthy()
+  })
+
+  it('commits the inline editor on blur', async () => {
+    const { canvas, container, emitted } = renderWidget([box()])
+    await fireEvent.dblClick(canvas, { clientX: 30, clientY: 30 })
+    const editor = container.querySelector('textarea')!
+    await fireEvent.update(editor, 'committed')
+    await fireEvent.blur(editor)
+    expect(lastBoxes(emitted)[0].metadata.desc).toBe('committed')
+  })
+})

src/components/boundingBoxes/WidgetBoundingBoxes.vue

@@ -0,0 +1,181 @@
+<template>
+  <div
+    class="widget-expands flex size-full flex-col gap-1 select-none"
+    data-testid="bounding-boxes"
+    @pointerdown.stop
+  >
+    <div
+      ref="canvasContainer"
+      class="relative w-full shrink-0 overflow-hidden rounded-sm border border-component-node-border bg-node-component-surface"
+      :style="canvasStyle"
+    >
+      <canvas
+        ref="canvasEl"
+        tabindex="0"
+        class="absolute inset-0 size-full rounded-sm outline-none"
+        :style="{ cursor: canvasCursor }"
+        @pointerdown="onPointerDown"
+        @pointermove="onCanvasPointerMove"
+        @pointerup="onDocPointerUp"
+        @pointercancel="onDocPointerUp"
+        @pointerleave="onPointerLeave"
+        @lostpointercapture="onDocPointerUp"
+        @dblclick="onDoubleClick"
+        @keydown="onCanvasKeyDown"
+        @focus="focused = true"
+        @blur="focused = false"
+      />
+      <textarea
+        v-if="inlineEditor"
+        ref="inlineEditorEl"
+        v-model="inlineEditor.value"
+        class="absolute box-border resize-none rounded-sm border-2 bg-black/90 p-1 font-mono text-xs text-white outline-none"
+        :style="inlineEditor.style"
+        data-capture-wheel="true"
+        @keydown.stop="onInlineKeyDown"
+        @blur="commitInlineEditor"
+      />
+    </div>
+
+    <div
+      v-if="activeRegion"
+      class="flex flex-col gap-2 rounded-sm bg-node-component-surface p-2 text-xs"
+    >
+      <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',
+              activeRegion.type === 'obj'
+                ? 'rounded-sm bg-component-node-widget-background-selected text-base-foreground'
+                : 'text-node-text-muted hover:text-node-text'
+            )
+          "
+          @click="setActiveType('obj')"
+        >
+          {{ $t('boundingBoxes.typeObj') }}
+        </Button>
+        <Button
+          variant="textonly"
+          size="unset"
+          :class="
+            cn(
+              'flex-1 self-stretch px-2 text-xs transition-colors',
+              activeRegion.type === 'text'
+                ? 'rounded-sm bg-component-node-widget-background-selected text-base-foreground'
+                : 'text-node-text-muted hover:text-node-text'
+            )
+          "
+          @click="setActiveType('text')"
+        >
+          {{ $t('boundingBoxes.typeText') }}
+        </Button>
+      </div>
+      <div
+        v-if="activeRegion.type === 'text'"
+        class="group relative rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted hover:bg-component-node-widget-background-hovered"
+      >
+        <span
+          class="pointer-events-none absolute top-1.5 left-3 z-10 text-2xs text-muted-foreground"
+        >
+          {{ $t('boundingBoxes.textLabel') }}
+        </span>
+        <Textarea
+          v-model="activeRegion.text"
+          :placeholder="$t('boundingBoxes.textPlaceholder')"
+          class="min-h-14 resize-none overflow-hidden pt-5 text-(length:--comfy-textarea-font-size) leading-normal not-disabled:bg-component-node-widget-background not-disabled:text-component-node-foreground hover:overflow-auto focus:overflow-auto"
+          data-capture-wheel="true"
+          @update:model-value="syncState"
+        />
+      </div>
+      <div
+        class="group relative rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted hover:bg-component-node-widget-background-hovered"
+      >
+        <span
+          class="pointer-events-none absolute top-1.5 left-3 z-10 text-2xs text-muted-foreground"
+        >
+          {{ $t('boundingBoxes.descLabel') }}
+        </span>
+        <Textarea
+          v-model="activeRegion.desc"
+          :placeholder="$t('boundingBoxes.descPlaceholder')"
+          class="min-h-20 resize-none overflow-hidden pt-5 text-(length:--comfy-textarea-font-size) leading-normal not-disabled:bg-component-node-widget-background not-disabled:text-component-node-foreground hover:overflow-auto focus:overflow-auto"
+          data-capture-wheel="true"
+          @update:model-value="syncState"
+        />
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="shrink-0 truncate text-sm text-muted-foreground">
+          {{ $t('boundingBoxes.colors') }}
+        </span>
+        <PaletteSwatchRow
+          v-model="activeRegion.palette"
+          :max="maxColors"
+          @update:model-value="syncState"
+        />
+      </div>
+    </div>
+    <div v-else-if="hasRegions" class="text-node-text-muted px-1 text-xs">
+      {{ $t('boundingBoxes.clickRegionToEdit') }}
+    </div>
+
+    <Button
+      variant="secondary"
+      size="md"
+      class="gap-2 rounded-lg border border-component-node-border bg-component-node-background text-xs text-muted-foreground hover:text-base-foreground"
+      @click="clearAll"
+    >
+      <i class="icon-[lucide--undo-2]" />
+      {{ $t('boundingBoxes.clearAll') }}
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+import PaletteSwatchRow from '@/components/palette/PaletteSwatchRow.vue'
+import Button from '@/components/ui/button/Button.vue'
+import Textarea from '@/components/ui/textarea/Textarea.vue'
+import { useBoundingBoxes } from '@/composables/boundingBoxes/useBoundingBoxes'
+import type { BoundingBox } from '@/types/boundingBoxes'
+
+const { nodeId } = defineProps<{ nodeId: string }>()
+const modelValue = defineModel<BoundingBox[]>({ default: () => [] })
+
+const canvasEl = useTemplateRef<HTMLCanvasElement>('canvasEl')
+const canvasContainer = useTemplateRef<HTMLDivElement>('canvasContainer')
+const inlineEditorEl = useTemplateRef<HTMLTextAreaElement>('inlineEditorEl')
+
+const {
+  canvasStyle,
+  canvasCursor,
+  focused,
+  activeRegion,
+  hasRegions,
+  inlineEditor,
+  maxColors,
+  onPointerDown,
+  onCanvasPointerMove,
+  onDocPointerUp,
+  onPointerLeave,
+  onDoubleClick,
+  onCanvasKeyDown,
+  onInlineKeyDown,
+  commitInlineEditor,
+  setActiveType,
+  clearAll,
+  syncState
+} = useBoundingBoxes(nodeId, {
+  canvasEl,
+  canvasContainer,
+  inlineEditorEl,
+  modelValue
+})
+</script>

src/components/builder/AppBuilder.vue

@@ -10,7 +10,7 @@ import IoItem from '@/components/builder/IoItem.vue'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
 import { useResolvedSelectedInputs } from '@/components/builder/useResolvedSelectedInputs'
 import type { ResolvedSelection } from '@/components/builder/useResolvedSelectedInputs'
-import type { WidgetId } from '@/types/widgetId'
+import type { WidgetEntityId } from '@/world/entityIds'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
@@ -110,8 +110,8 @@ function getWidgetBounding(entry: ResolvedSelection): BoundStyle | undefined {
   }
 }
 
-function removeSelectedWidgetId(widgetId: WidgetId): void {
-  const index = appModeStore.selectedInputs.findIndex(([id]) => id === widgetId)
+function removeSelectedEntityId(entityId: WidgetEntityId): void {
+  const index = appModeStore.selectedInputs.findIndex(([id]) => id === entityId)
   if (index !== -1) appModeStore.selectedInputs.splice(index, 1)
 }
 
@@ -139,11 +139,11 @@ function handleClick(e: MouseEvent) {
   }
   if (!isSelectInputsMode.value || widget.options.canvasOnly) return
 
-  const widgetId = widget.widgetId
-  if (!widgetId) return
-  const index = appModeStore.selectedInputs.findIndex(([id]) => id === widgetId)
+  const entityId = widget.entityId
+  if (!entityId) return
+  const index = appModeStore.selectedInputs.findIndex(([id]) => id === entityId)
   if (index === -1)
-    appModeStore.selectedInputs.push([widgetId, widget.name, undefined])
+    appModeStore.selectedInputs.push([entityId, widget.name, undefined])
   else appModeStore.selectedInputs.splice(index, 1)
 }
 
@@ -172,7 +172,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
   () =>
     resolvedInputs.value.map(
       (entry) =>
-        [entry.widgetId, getWidgetBounding(entry)] as [
+        [entry.entityId, getWidgetBounding(entry)] as [
           string,
           MaybeRef<BoundStyle> | undefined
         ]
@@ -220,7 +220,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
           v-slot="{ dragClass }"
           v-model="appModeStore.selectedInputs"
         >
-          <template v-for="entry in resolvedInputs" :key="entry.widgetId">
+          <template v-for="entry in resolvedInputs" :key="entry.entityId">
             <IoItem
               v-if="entry.status === 'resolved'"
               :class="
@@ -239,7 +239,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
               "
               :title="entry.displayName"
               :sub-title="t('linearMode.builder.unknownWidget')"
-              :remove="() => removeSelectedWidgetId(entry.widgetId)"
+              :remove="() => removeSelectedEntityId(entry.entityId)"
             />
           </template>
         </DraggableList>

src/components/builder/AppModeWidgetList.vue

@@ -60,7 +60,7 @@ const mappedSelections = computed((): WidgetEntry[] => {
 
   return resolvedInputs.value.flatMap((entry) => {
     if (entry.status !== 'resolved') return []
-    const { widgetId, node, widget, config } = entry
+    const { entityId, node, widget, config } = entry
     if (node.mode !== LGraphEventMode.ALWAYS) return []
 
     if (!nodeDataByNode.has(node)) {
@@ -70,7 +70,7 @@ const mappedSelections = computed((): WidgetEntry[] => {
 
     const matchingWidget = fullNodeData.widgets?.find((vueWidget) => {
       if (vueWidget.slotMetadata?.linked) return false
-      return vueWidget.widgetId === widgetId
+      return vueWidget.entityId === entityId
     })
     if (!matchingWidget) return []
 
@@ -79,7 +79,7 @@ const mappedSelections = computed((): WidgetEntry[] => {
 
     return [
       {
-        key: widgetId,
+        key: entityId,
         persistedHeight: config?.height,
         nodeData: {
           ...fullNodeData,

src/components/builder/useResolvedSelectedInputs.test.ts

@@ -1,13 +1,12 @@
 import { createTestingPinia } from '@pinia/testing'
-import { fromAny, fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
 import { app } from '@/scripts/app'
 import { useAppModeStore } from '@/stores/appModeStore'
-import type { WidgetId } from '@/types/widgetId'
+import type { WidgetEntityId } from '@/world/entityIds'
 
 import { useResolvedSelectedInputs } from './useResolvedSelectedInputs'
 
@@ -23,29 +22,18 @@ vi.mock('@/scripts/app', () => ({
 }))
 
 const rootGraphId = '11111111-1111-4111-8111-111111111111'
-const entitySeed = `${rootGraphId}:1:seed` as WidgetId
+const entitySeed = `${rootGraphId}:1:seed` as WidgetEntityId
 
 function makeNode(id: number, widgetNames: string[]): LGraphNode {
   return fromAny<LGraphNode, unknown>({
     id,
-    inputs: [],
-    isSubgraphNode: () => false,
     widgets: widgetNames.map((name) => ({
       name,
-      widgetId: `${rootGraphId}:${id}:${name}` as WidgetId
+      entityId: `${rootGraphId}:${id}:${name}` as WidgetEntityId
     }))
   })
 }
 
-function makeSubgraphNode(id: number, inputs: INodeInputSlot[]): LGraphNode {
-  return fromAny<LGraphNode, unknown>({
-    id,
-    inputs,
-    isSubgraphNode: () => true,
-    widgets: []
-  })
-}
-
 function setRootGraphNodes(nodes: LGraphNode[]) {
   vi.mocked(app.rootGraph).nodes = nodes
   vi.mocked(app.rootGraph).getNodeById = vi.fn(
@@ -100,27 +88,4 @@ describe('useResolvedSelectedInputs', () => {
 
     expect(resolved.value[0]?.status).toBe('unknown')
   })
-
-  it('resolves promoted subgraph inputs from their host input widgetId', () => {
-    const node = makeSubgraphNode(1, [
-      fromPartial<INodeInputSlot>({
-        name: 'seed',
-        label: 'renamed_seed',
-        widgetId: entitySeed
-      })
-    ])
-    setRootGraphNodes([node])
-
-    const appModeStore = useAppModeStore()
-    appModeStore.selectedInputs = [[entitySeed, 'seed']]
-
-    const resolved = useResolvedSelectedInputs()
-
-    expect(resolved.value[0]).toMatchObject({
-      status: 'resolved',
-      node,
-      displayName: 'seed',
-      widget: { name: 'seed', label: 'renamed_seed', widgetId: entitySeed }
-    })
-  })
 })

src/components/builder/useResolvedSelectedInputs.ts

@@ -1,19 +1,18 @@
 import { useEventListener } from '@vueuse/core'
 import { computed, shallowRef, triggerRef } from 'vue'
 
-import { promotedInputWidgets } from '@/core/graph/subgraph/promotedInputWidget'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import type { InputWidgetConfig } from '@/platform/workflow/management/stores/comfyWorkflow'
 import { app } from '@/scripts/app'
 import { useAppModeStore } from '@/stores/appModeStore'
-import type { WidgetId } from '@/types/widgetId'
-import { isWidgetId, parseWidgetId } from '@/types/widgetId'
+import type { WidgetEntityId } from '@/world/entityIds'
+import { isWidgetEntityId, parseWidgetEntityId } from '@/world/entityIds'
 
 export type ResolvedSelection =
   | {
       status: 'resolved'
-      widgetId: WidgetId
+      entityId: WidgetEntityId
       node: LGraphNode
       widget: IBaseWidget
       displayName: string
@@ -21,7 +20,7 @@ export type ResolvedSelection =
     }
   | {
       status: 'unknown'
-      widgetId: WidgetId
+      entityId: WidgetEntityId
       displayName: string
       config?: InputWidgetConfig
     }
@@ -55,19 +54,16 @@ export function useResolvedSelectedInputs() {
     if (!rootGraph) return []
 
     return appModeStore.selectedInputs.flatMap(
-      ([widgetId, displayName, config]): ResolvedSelection[] => {
-        if (!isWidgetId(widgetId)) return []
-        const { nodeId, name } = parseWidgetId(widgetId)
+      ([entityId, displayName, config]): ResolvedSelection[] => {
+        if (!isWidgetEntityId(entityId)) return []
+        const { nodeId, name } = parseWidgetEntityId(entityId)
         const node = rootGraph.getNodeById(nodeId)
-        const widgets = node?.isSubgraphNode()
-          ? promotedInputWidgets(node)
-          : node?.widgets
-        const widget = widgets?.find((w) => w.name === name)
+        const widget = node?.widgets?.find((w) => w.name === name)
         if (!node || !widget) {
-          return [{ status: 'unknown', widgetId, displayName, config }]
+          return [{ status: 'unknown', entityId, displayName, config }]
         }
         return [
-          { status: 'resolved', widgetId, node, widget, displayName, config }
+          { status: 'resolved', entityId, node, widget, displayName, config }
         ]
       }
     )

src/components/dialog/GlobalDialog.test.ts

@@ -17,9 +17,7 @@ import { useDialogStore } from '@/stores/dialogStore'
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
-  messages: {
-    en: { g: { close: 'Close', maximizeDialog: 'Maximize' } }
-  },
+  messages: { en: { g: { close: 'Close' } } },
   missingWarn: false,
   fallbackWarn: false
 })
@@ -195,68 +193,6 @@ describe('GlobalDialog Reka parity with PrimeVue', () => {
 
     expect(store.isDialogOpen('reka-esc-blocked')).toBe(true)
   })
-
-  it('applies headerClass and bodyClass on the non-headless path', async () => {
-    mountDialog()
-    const store = useDialogStore()
-
-    store.showDialog({
-      key: 'reka-section-classes',
-      title: 'Section classes',
-      component: Body,
-      dialogComponentProps: {
-        renderer: 'reka',
-        headerClass: 'p-2',
-        bodyClass: 'p-0'
-      }
-    })
-
-    await screen.findByRole('dialog')
-
-    // eslint-disable-next-line testing-library/no-node-access
-    const header = screen.getByText('Section classes').parentElement
-    expect(header?.classList.contains('p-2')).toBe(true)
-    // twMerge drops the default header padding in favor of headerClass
-    expect(header?.classList.contains('px-4')).toBe(false)
-
-    // eslint-disable-next-line testing-library/no-node-access
-    const body = screen.getByTestId('body').parentElement
-    expect(body?.classList.contains('p-0')).toBe(true)
-    expect(body?.classList.contains('px-4')).toBe(false)
-  })
-
-  it('maximize overrides custom dimension classes from contentClass', async () => {
-    mountDialog()
-    const store = useDialogStore()
-    const user = userEvent.setup()
-
-    store.showDialog({
-      key: 'reka-maximize-wins',
-      title: 'Maximize wins',
-      component: Body,
-      dialogComponentProps: {
-        renderer: 'reka',
-        maximizable: true,
-        contentClass:
-          'w-[80vw] max-w-[80vw] sm:max-w-[80vw] h-[80vh] max-h-[80vh]'
-      }
-    })
-
-    const dialog = await screen.findByRole('dialog')
-    expect(dialog.classList.contains('w-[80vw]')).toBe(true)
-
-    await user.click(screen.getByRole('button', { name: 'Maximize' }))
-
-    // Maximized dimensions win over the caller's fixed dimensions,
-    // mirroring PrimeVue's `.p-dialog-maximized` !important behavior.
-    expect(dialog.classList.contains('size-auto')).toBe(true)
-    expect(dialog.classList.contains('max-h-none')).toBe(true)
-    expect(dialog.classList.contains('w-[80vw]')).toBe(false)
-    expect(dialog.classList.contains('h-[80vh]')).toBe(false)
-    expect(dialog.classList.contains('max-h-[80vh]')).toBe(false)
-    expect(dialog.classList.contains('max-w-[80vw]')).toBe(false)
-    expect(dialog.classList.contains('sm:max-w-[80vw]')).toBe(false)
-  })
 })
 
 describe('shouldPreventRekaDismiss', () => {
@@ -302,22 +238,6 @@ describe('shouldPreventRekaDismiss', () => {
     expect(event.defaultPrevented).toBe(false)
   })
 
-  it('prevents dismiss when the dialog is not the top-most (stacked)', () => {
-    // A backgrounded dialog must never dismiss on an outside pointer — the
-    // pointer belongs to the dialog stacked above it (e.g. Edit Keybinding
-    // opening over Settings). Target is outside any overlay, so only the
-    // is-active gate can prevent it.
-    const event = makeEvent(document.body)
-    onRekaPointerDownOutside({ dismissableMask: undefined }, event, false)
-    expect(event.defaultPrevented).toBe(true)
-  })
-
-  it('allows the top-most dialog to dismiss on a true outside pointer', () => {
-    const event = makeEvent(document.body)
-    onRekaPointerDownOutside({ dismissableMask: undefined }, event, true)
-    expect(event.defaultPrevented).toBe(false)
-  })
-
   it('prevents dismiss when dismissableMask is false even outside an overlay', () => {
     const event = makeEvent(document.body)
     onRekaPointerDownOutside({ dismissableMask: false }, event)

src/components/dialog/GlobalDialog.vue

@@ -18,19 +18,13 @@
           :maximized="!!item.dialogComponentProps.maximized"
           :class="item.dialogComponentProps.contentClass"
           :aria-labelledby="item.key"
-          @open-auto-focus="(e) => onRekaOpenAutoFocus(e, item.key)"
           @escape-key-down="
             (e) =>
               item.dialogComponentProps.closeOnEscape === false &&
               e.preventDefault()
           "
           @pointer-down-outside="
-            (e) =>
-              onRekaPointerDownOutside(
-                item.dialogComponentProps,
-                e,
-                dialogStore.activeKey === item.key
-              )
+            (e) => onRekaPointerDownOutside(item.dialogComponentProps, e)
           "
           @focus-outside="onRekaFocusOutside"
           @mousedown="() => dialogStore.riseDialog({ key: item.key })"
@@ -43,7 +37,7 @@
             />
           </template>
           <template v-else>
-            <DialogHeader :class="item.dialogComponentProps.headerClass">
+            <DialogHeader>
               <component
                 :is="item.headerComponent"
                 v-if="item.headerComponent"
@@ -64,24 +58,14 @@
                 />
               </div>
             </DialogHeader>
-            <div
-              :class="
-                cn(
-                  'flex-1 overflow-auto px-4 py-2',
-                  item.dialogComponentProps.bodyClass
-                )
-              "
-            >
+            <div class="flex-1 overflow-auto px-4 py-2">
               <component
                 :is="item.component"
                 v-bind="item.contentProps"
                 :maximized="item.dialogComponentProps.maximized"
               />
             </div>
-            <DialogFooter
-              v-if="item.footerComponent"
-              :class="item.dialogComponentProps.footerClass"
-            >
+            <DialogFooter v-if="item.footerComponent">
               <component :is="item.footerComponent" v-bind="item.footerProps" />
             </DialogFooter>
           </template>
@@ -125,8 +109,6 @@
 <script setup lang="ts">
 import PrimeDialog from 'primevue/dialog'
 
-import { cn } from '@comfyorg/tailwind-utils'
-
 import Dialog from '@/components/ui/dialog/Dialog.vue'
 import DialogClose from '@/components/ui/dialog/DialogClose.vue'
 import DialogContent from '@/components/ui/dialog/DialogContent.vue'
@@ -154,22 +136,6 @@ function onRekaOpenChange(key: string, open: boolean) {
   if (!open) dialogStore.closeDialog({ key })
 }
 
-// Reka's FocusScope focuses the first tabbable element on open (often a header
-// or footer button). Dialog content that marks an input with `autofocus` (e.g.
-// the keybinding capture input, the prompt input) relied on PrimeVue honoring
-// that attribute, so honor it here: focus the autofocus target and cancel
-// Reka's default auto-focus when one is present.
-function onRekaOpenAutoFocus(event: Event, key: string) {
-  const content = document.querySelector<HTMLElement>(
-    `[aria-labelledby="${CSS.escape(key)}"]`
-  )
-  const autofocusEl = content?.querySelector<HTMLElement>('[autofocus]')
-  if (autofocusEl) {
-    event.preventDefault()
-    autofocusEl.focus()
-  }
-}
-
 function toggleMaximize(item: DialogInstance) {
   item.dialogComponentProps.maximized = !item.dialogComponentProps.maximized
 }

src/components/dialog/content/subscription/CancelSubscriptionDialogContent.test.ts

@@ -1,8 +1,7 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import userEvent from '@testing-library/user-event'
-import { render, screen, waitFor } from '@testing-library/vue'
+import { render, screen } from '@testing-library/vue'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
@@ -45,28 +44,23 @@ const mockSubscription = vi.hoisted(() => ({
   value: null as { endDate: string | null } | null
 }))
 
-const mockCancelSubscription = vi.hoisted(() => vi.fn())
-const mockFetchStatus = vi.hoisted(() => vi.fn())
-const mockCloseDialog = vi.hoisted(() => vi.fn())
-const mockToastAdd = vi.hoisted(() => vi.fn())
-
 vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: vi.fn(() => ({
-    cancelSubscription: mockCancelSubscription,
-    fetchStatus: mockFetchStatus,
+    cancelSubscription: vi.fn(),
+    fetchStatus: vi.fn(),
     subscription: mockSubscription
   }))
 }))
 
 vi.mock('@/stores/dialogStore', () => ({
   useDialogStore: vi.fn(() => ({
-    closeDialog: mockCloseDialog
+    closeDialog: vi.fn()
   }))
 }))
 
 vi.mock('primevue/usetoast', () => ({
   useToast: vi.fn(() => ({
-    add: mockToastAdd
+    add: vi.fn()
   }))
 }))
 
@@ -92,54 +86,6 @@ function renderComponent(props: { cancelAt?: string } = {}) {
 }
 
 describe('CancelSubscriptionDialogContent', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('cancel flow', () => {
-    it('shows an error toast and keeps the dialog open when cancellation fails', async () => {
-      mockSubscription.value = null
-      mockCancelSubscription.mockRejectedValueOnce(
-        new Error('Subscription cancellation timed out')
-      )
-
-      renderComponent()
-      await userEvent.click(
-        screen.getByRole('button', { name: /^cancel subscription$/i })
-      )
-
-      await waitFor(() =>
-        expect(mockToastAdd).toHaveBeenCalledWith(
-          expect.objectContaining({
-            severity: 'error',
-            detail: 'Subscription cancellation timed out'
-          })
-        )
-      )
-      expect(mockCloseDialog).not.toHaveBeenCalled()
-    })
-
-    it('closes the dialog and shows a success toast when cancellation succeeds', async () => {
-      mockSubscription.value = null
-      mockCancelSubscription.mockResolvedValueOnce(undefined)
-
-      renderComponent()
-      await userEvent.click(
-        screen.getByRole('button', { name: /^cancel subscription$/i })
-      )
-
-      await waitFor(() =>
-        expect(mockCloseDialog).toHaveBeenCalledWith({
-          key: 'cancel-subscription'
-        })
-      )
-      expect(mockFetchStatus).toHaveBeenCalled()
-      expect(mockToastAdd).toHaveBeenCalledWith(
-        expect.objectContaining({ severity: 'success' })
-      )
-    })
-  })
-
   describe('formattedEndDate fallbacks', () => {
     it('uses the localized fallback when no cancel timestamp is available', () => {
       mockSubscription.value = { endDate: null }

src/components/dialog/rekaPrimeVueBridge.ts

@@ -27,19 +27,8 @@ function isInsideOverlay(target: EventTarget | null): boolean {
 
 export function onRekaPointerDownOutside(
   options: { dismissableMask?: boolean },
-  event: OutsideEvent,
-  isActive = true
+  event: OutsideEvent
 ) {
-  // Stacked dialogs each render an independent Reka `Dialog` root, so a lower
-  // dialog's DismissableLayer sees a pointer-down that opened (or landed on)
-  // the dialog above it as "outside" and would dismiss itself — including via
-  // the upper dialog's overlay, whose element matches none of the portal
-  // selectors below. Only the top-most dialog may dismiss on an outside
-  // pointer, mirroring the escape-key handling in `GlobalDialog`.
-  if (!isActive) {
-    event.preventDefault()
-    return
-  }
   if (isInsideOverlay(event.detail.originalEvent.target)) {
     event.preventDefault()
     return

src/components/graph/DomWidgets.test.ts

@@ -57,85 +57,154 @@ function drawFrame(canvas: LGraphCanvas) {
   canvas.onDrawForeground?.({} as CanvasRenderingContext2D, new Rectangle())
 }
 
-describe('DomWidgets positioning', () => {
+describe('DomWidgets transition grace characterization', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))
   })
 
-  it('positions an active visible widget relative to its owning node', () => {
+  it('applies transition grace for exactly one frame when override exists but is not active', () => {
     const canvasStore = useCanvasStore()
     const domWidgetStore = useDomWidgetStore()
 
-    const graph = new LGraph()
-    const node = createNode(graph, 1, 'host', [100, 200])
-    const widget = createWidget('widget-pos', node, 14)
+    const graphA = new LGraph()
+    const graphB = new LGraph()
+    const interiorNode = createNode(graphA, 1, 'interior', [100, 200])
+    const overrideNode = createNode(graphB, 2, 'override', [600, 700])
+
+    const widget = createWidget('widget-transition', interiorNode, 14)
+    const overrideWidget = createWidget('override-widget', overrideNode, 22)
 
     domWidgetStore.registerWidget(widget)
-
-    const canvas = createCanvas(graph)
-    canvasStore.canvas = canvas
-
-    render(DomWidgets, {
-      global: { stubs: { DomWidget: true } }
+    domWidgetStore.setPositionOverride(widget.id, {
+      node: overrideNode,
+      widget: overrideWidget
     })
-
-    drawFrame(canvas)
-
-    const widgetState = domWidgetStore.widgetStates.get(widget.id)
-    if (!widgetState) throw new Error('Widget state not registered')
-    expect(widgetState.visible).toBe(true)
-    expect(widgetState.pos).toEqual([110, 224])
-  })
-
-  it('hides a widget whose owning node is in a different graph', () => {
-    const canvasStore = useCanvasStore()
-    const domWidgetStore = useDomWidgetStore()
-
-    const currentGraph = new LGraph()
-    const otherGraph = new LGraph()
-    const node = createNode(otherGraph, 1, 'host', [100, 200])
-    const widget = createWidget('widget-other-graph', node, 14)
-
-    domWidgetStore.registerWidget(widget)
-
-    const canvas = createCanvas(currentGraph)
-    canvasStore.canvas = canvas
-
-    render(DomWidgets, {
-      global: { stubs: { DomWidget: true } }
-    })
-
-    drawFrame(canvas)
-
-    const widgetState = domWidgetStore.widgetStates.get(widget.id)
-    if (!widgetState) throw new Error('Widget state not registered')
-    expect(widgetState.visible).toBe(false)
-  })
-
-  it('hides an inactive widget', () => {
-    const canvasStore = useCanvasStore()
-    const domWidgetStore = useDomWidgetStore()
-
-    const graph = new LGraph()
-    const node = createNode(graph, 1, 'host', [0, 0])
-    const widget = createWidget('widget-inactive', node, 10)
-
-    domWidgetStore.registerWidget(widget)
     domWidgetStore.deactivateWidget(widget.id)
 
     const widgetState = domWidgetStore.widgetStates.get(widget.id)
     if (!widgetState) throw new Error('Widget state not registered')
     widgetState.visible = true
+    widgetState.pos = [321, 654]
 
-    const canvas = createCanvas(graph)
+    const canvas = createCanvas(graphA)
     canvasStore.canvas = canvas
 
     render(DomWidgets, {
-      global: { stubs: { DomWidget: true } }
+      global: {
+        stubs: {
+          DomWidget: true
+        }
+      }
+    })
+
+    drawFrame(canvas)
+    expect(widgetState.visible).toBe(true)
+    expect(widgetState.pos).toEqual([321, 654])
+
+    drawFrame(canvas)
+    expect(widgetState.visible).toBe(false)
+  })
+
+  it('uses override positioning while override node is in current graph even when widget is inactive', () => {
+    const canvasStore = useCanvasStore()
+    const domWidgetStore = useDomWidgetStore()
+
+    const graphA = new LGraph()
+    const graphB = new LGraph()
+    const interiorNode = createNode(graphA, 1, 'interior', [10, 20])
+    const overrideNode = createNode(graphB, 2, 'override', [300, 400])
+
+    const widget = createWidget('widget-override-active', interiorNode, 8)
+    const overrideWidget = createWidget(
+      'override-position-source',
+      overrideNode,
+      18
+    )
+
+    domWidgetStore.registerWidget(widget)
+    domWidgetStore.setPositionOverride(widget.id, {
+      node: overrideNode,
+      widget: overrideWidget
+    })
+    domWidgetStore.deactivateWidget(widget.id)
+
+    const widgetState = domWidgetStore.widgetStates.get(widget.id)
+    if (!widgetState) throw new Error('Widget state not registered')
+
+    const canvas = createCanvas(graphB)
+    canvasStore.canvas = canvas
+
+    render(DomWidgets, {
+      global: {
+        stubs: {
+          DomWidget: true
+        }
+      }
     })
 
     drawFrame(canvas)
 
-    expect(widgetState.visible).toBe(false)
+    expect(widgetState.visible).toBe(true)
+    expect(widgetState.pos).toEqual([310, 428])
+  })
+
+  it('cleans orphaned transition-grace ids after widget removal', () => {
+    const canvasStore = useCanvasStore()
+    const domWidgetStore = useDomWidgetStore()
+
+    const graphA = new LGraph()
+    const graphB = new LGraph()
+    const interiorNode = createNode(graphA, 1, 'interior', [0, 0])
+    const overrideNode = createNode(graphB, 2, 'override', [200, 200])
+
+    const canvas = createCanvas(graphA)
+    canvasStore.canvas = canvas
+
+    render(DomWidgets, {
+      global: {
+        stubs: {
+          DomWidget: true
+        }
+      }
+    })
+
+    const oldWidget = createWidget('shared-widget-id', interiorNode, 10)
+    const overrideWidget = createWidget(
+      'shared-override-widget',
+      overrideNode,
+      14
+    )
+
+    domWidgetStore.registerWidget(oldWidget)
+    domWidgetStore.setPositionOverride(oldWidget.id, {
+      node: overrideNode,
+      widget: overrideWidget
+    })
+    domWidgetStore.deactivateWidget(oldWidget.id)
+
+    drawFrame(canvas)
+    domWidgetStore.unregisterWidget(oldWidget.id)
+
+    drawFrame(canvas)
+
+    const replacementWidget = createWidget('shared-widget-id', interiorNode, 10)
+    domWidgetStore.registerWidget(replacementWidget)
+    domWidgetStore.setPositionOverride(replacementWidget.id, {
+      node: overrideNode,
+      widget: overrideWidget
+    })
+    domWidgetStore.deactivateWidget(replacementWidget.id)
+
+    const replacementState = domWidgetStore.widgetStates.get(
+      replacementWidget.id
+    )
+    if (!replacementState) throw new Error('Replacement widget missing state')
+    replacementState.visible = true
+    replacementState.pos = [999, 999]
+
+    drawFrame(canvas)
+
+    expect(replacementState.visible).toBe(true)
+    expect(replacementState.pos).toEqual([999, 999])
   })
 })

src/components/graph/DomWidgets.vue

@@ -21,6 +21,7 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 
 const domWidgetStore = useDomWidgetStore()
+const overrideTransitionGrace = new Set<string>()
 
 const widgetStates = computed(() => [...domWidgetStore.widgetStates.values()])
 
@@ -30,16 +31,47 @@ const updateWidgets = () => {
 
   const lowQuality = lgCanvas.low_quality
   const currentGraph = lgCanvas.graph
+  const seenWidgetIds = new Set<string>()
 
   for (const widgetState of widgetStates.value) {
     const widget = widgetState.widget
+    seenWidgetIds.add(widget.id)
 
-    if (!widget.isVisible() || !widgetState.active) {
+    // Use position override only when the override node (SubgraphNode) is
+    // in the current graph. When the user enters the subgraph, the override
+    // node is no longer visible — fall back to the widget's own node.
+    // Use graph reference equality (IDs are not unique across graphs).
+    const override = widgetState.positionOverride
+    const useOverride = !!override && currentGraph === override.node.graph
+    const inOverrideTransitionGap =
+      !!override && !useOverride && !widgetState.active
+    const useTransitionGrace =
+      inOverrideTransitionGap && !overrideTransitionGrace.has(widget.id)
+
+    if (useTransitionGrace) {
+      overrideTransitionGrace.add(widget.id)
+    } else if (!inOverrideTransitionGap) {
+      overrideTransitionGrace.delete(widget.id)
+    }
+
+    // Early exit for non-visible widgets.
+    // When a position override is active (widget promoted to SubgraphNode),
+    // the interior widget's `active` flag is false (its node is in the
+    // subgraph, not the current graph) — bypass that check.
+    if (
+      !widget.isVisible() ||
+      (!widgetState.active && !useOverride && !useTransitionGrace)
+    ) {
       widgetState.visible = false
       continue
     }
 
-    const posNode = widget.node
+    // During graph transitions, hold the previous position for one frame
+    // so promoted widgets don't briefly disappear before activation flips.
+    if (useTransitionGrace) continue
+
+    const posNode = useOverride ? override.node : widget.node
+    const posWidget = useOverride ? override.widget : widget
 
     const isInCorrectGraph = posNode.graph === currentGraph
     const nodeVisible = lgCanvas.isNodeVisible(posNode)
@@ -53,16 +85,22 @@ const updateWidgets = () => {
       const margin = widget.margin
       widgetState.pos = [
         posNode.pos[0] + margin,
-        posNode.pos[1] + margin + widget.y
+        posNode.pos[1] + margin + posWidget.y
       ]
       widgetState.size = [
-        (widget.width ?? posNode.width) - margin * 2,
-        (widget.computedHeight ?? 50) - margin * 2
+        (posWidget.width ?? posNode.width) - margin * 2,
+        (posWidget.computedHeight ?? 50) - margin * 2
       ]
       widgetState.zIndex = getDomWidgetZIndex(posNode, currentGraph)
       widgetState.readonly = lgCanvas.read_only
     }
   }
+
+  for (const widgetId of overrideTransitionGrace) {
+    if (!seenWidgetIds.has(widgetId)) {
+      overrideTransitionGrace.delete(widgetId)
+    }
+  }
 }
 
 const canvasStore = useCanvasStore()

src/components/graph/widgets/DomWidget.test.ts

@@ -54,7 +54,7 @@ vi.mock('@/platform/settings/settingStore', () => ({
   })
 }))
 
-function createWidgetState(disabled: boolean): DomWidgetState {
+function createWidgetState(overrideDisabled: boolean): DomWidgetState {
   const domWidgetStore = useDomWidgetStore()
   const node = createMockLGraphNode({
     id: 1,
@@ -70,10 +70,14 @@ function createWidgetState(disabled: boolean): DomWidgetState {
     value: '',
     options: {},
     node,
-    computedDisabled: disabled
+    computedDisabled: false
   })
 
   domWidgetStore.registerWidget(widget)
+  domWidgetStore.setPositionOverride(widget.id, {
+    node: createMockLGraphNode({ id: 2 }),
+    widget: { computedDisabled: overrideDisabled } as DomWidgetState['widget']
+  })
 
   const state = domWidgetStore.widgetStates.get(widget.id)
   if (!state) throw new Error('Expected registered DomWidgetState')
@@ -94,7 +98,7 @@ describe('DomWidget disabled style', () => {
     vi.clearAllMocks()
   })
 
-  it('uses disabled style when widget is computedDisabled', async () => {
+  it('uses disabled style when promoted override widget is computedDisabled', async () => {
     const widgetState = createWidgetState(true)
     const { container } = render(DomWidget, {
       props: {

src/components/graph/widgets/DomWidget.vue

@@ -69,7 +69,11 @@ const updateDomClipping = () => {
     return
   }
 
-  const isSelected = selectedNode === widgetState.widget.node
+  const override = widgetState.positionOverride
+  const overrideInGraph =
+    override && lgCanvas.graph?.getNodeById(override.node.id)
+  const ownerNode = overrideInGraph ? override.node : widgetState.widget.node
+  const isSelected = selectedNode === ownerNode
   const renderArea = selectedNode?.renderArea
   const offset = lgCanvas.ds.offset
   const scale = lgCanvas.ds.scale
@@ -100,7 +104,10 @@ const updateDomClipping = () => {
 const { left, top } = useElementBounding(canvasStore.getCanvas().canvas)
 
 function composeStyle() {
-  const isDisabled = widget.computedDisabled
+  const override = widgetState.positionOverride
+  const isDisabled = override
+    ? (override.widget.computedDisabled ?? widget.computedDisabled)
+    : widget.computedDisabled
 
   style.value = {
     ...positionStyle.value,
@@ -160,7 +167,13 @@ onMounted(() => {
       const lgCanvas = canvasStore.canvas
       if (!lgCanvas) return
 
-      const ownerNode = widgetState.widget.node
+      const override = widgetState.positionOverride
+      const overrideInGraph =
+        override && lgCanvas.graph?.getNodeById(override.node.id)
+      const ownerNode = overrideInGraph
+        ? override.node
+        : widgetState.widget.node
+
       lgCanvas.selectNode(ownerNode)
       lgCanvas.bringToFront(ownerNode)
     }

src/components/hdr/HdrViewerContent.test.ts

@@ -0,0 +1,126 @@
+/* eslint-disable testing-library/no-container, testing-library/no-node-access */
+import { render, screen } from '@testing-library/vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import HdrViewerContent from './HdrViewerContent.vue'
+
+vi.mock('@/base/common/downloadUtil', () => ({ downloadFile: vi.fn() }))
+
+const holder = vi.hoisted(() => ({ viewer: undefined as unknown }))
+vi.mock('@/composables/useHdrViewer', () => ({
+  useHdrViewer: () => holder.viewer,
+  CHANNEL_MODES: ['rgb', 'r', 'g', 'b', 'a', 'luminance']
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { loading: 'Loading', downloadImage: 'Download' },
+      hdrViewer: {
+        failedToLoad: 'Failed',
+        exposure: 'Exposure',
+        normalizeExposure: 'Auto exposure',
+        channel: 'Channel',
+        channels: {
+          rgb: 'RGB',
+          r: 'R',
+          g: 'G',
+          b: 'B',
+          a: 'Alpha',
+          luminance: 'Luminance'
+        },
+        sourceGamut: 'Source gamut',
+        dither: 'Dither',
+        clipWarnings: 'Clip warnings',
+        fitView: 'Fit',
+        histogram: 'Histogram',
+        resolution: 'Resolution',
+        min: 'Min',
+        max: 'Max',
+        mean: 'Mean',
+        stdDev: 'Std dev',
+        nan: 'NaN',
+        inf: 'Inf'
+      }
+    }
+  }
+})
+
+function makeViewer(overrides: Record<string, unknown> = {}) {
+  return {
+    exposureStops: ref(0),
+    dither: ref(true),
+    clipWarnings: ref(false),
+    gamut: ref('sRGB'),
+    channel: ref('r'),
+    loading: ref(false),
+    error: ref(null),
+    dimensions: ref('512 x 512'),
+    stats: ref({
+      min: 0,
+      max: 4,
+      mean: 0.5,
+      stdDev: 0.2,
+      nanCount: 2,
+      infCount: 1
+    }),
+    histogram: ref(new Uint32Array([1, 2, 3, 4])),
+    pixel: ref({ x: 1, y: 2, r: 0.1, g: 0.2, b: 0.3, a: 1 }),
+    mount: vi.fn(),
+    dispose: vi.fn(),
+    fitView: vi.fn(),
+    normalizeExposure: vi.fn(),
+    ...overrides
+  }
+}
+
+function renderViewer() {
+  return render(HdrViewerContent, {
+    props: { imageUrl: '/api/view?filename=out.exr' },
+    global: { plugins: [i18n], stubs: { Button: true } }
+  })
+}
+
+describe('HdrViewerContent', () => {
+  beforeEach(() => {
+    holder.viewer = makeViewer()
+  })
+
+  it('renders the full statistics set including NaN/Inf', () => {
+    renderViewer()
+    for (const label of [
+      'Resolution',
+      'Min',
+      'Max',
+      'Mean',
+      'Std dev',
+      'NaN',
+      'Inf'
+    ]) {
+      screen.getByText(label)
+    }
+  })
+
+  it('shows the pixel readout when a pixel is hovered', () => {
+    renderViewer()
+    expect(screen.getByTestId('hdr-pixel-readout')).toBeInTheDocument()
+  })
+
+  it('colors the histogram according to the selected channel', () => {
+    holder.viewer = makeViewer({ channel: ref('g') })
+    const { container } = renderViewer()
+    const path = container.querySelector('svg path')
+    expect(path?.getAttribute('class')).toContain('text-green-500')
+  })
+
+  it('renders an option for each channel mode', () => {
+    renderViewer()
+    expect(
+      screen.getByRole('option', { name: 'Luminance' })
+    ).toBeInTheDocument()
+  })
+})

src/components/hdr/HdrViewerContent.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="flex size-full bg-base-background">
+    <div class="relative flex-1">
+      <div
+        ref="containerRef"
+        class="absolute size-full"
+        data-testid="hdr-viewer-canvas"
+      />
+
+      <div
+        v-if="viewer.loading.value"
+        class="absolute inset-0 flex items-center justify-center text-base-foreground"
+      >
+        {{ $t('g.loading') }}...
+      </div>
+      <div
+        v-else-if="viewer.error.value"
+        role="alert"
+        class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-base-foreground"
+      >
+        <i class="icon-[lucide--image-off] size-12" />
+        <p class="text-sm">{{ $t('hdrViewer.failedToLoad') }}</p>
+      </div>
+
+      <div
+        v-if="viewer.pixel.value"
+        class="absolute top-2 left-2 rounded-sm bg-base-background/80 px-2 py-1 font-mono text-xs text-base-foreground"
+        data-testid="hdr-pixel-readout"
+      >
+        <div>{{ viewer.pixel.value.x }}, {{ viewer.pixel.value.y }}</div>
+        <div>
+          {{ formatNum(viewer.pixel.value.r) }}
+          {{ formatNum(viewer.pixel.value.g) }}
+          {{ formatNum(viewer.pixel.value.b) }}
+          <template v-if="viewer.pixel.value.a !== null">
+            {{ formatNum(viewer.pixel.value.a) }}
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex w-72 flex-col" data-testid="hdr-viewer-sidebar">
+      <div class="flex-1 overflow-y-auto p-4">
+        <div class="space-y-2">
+          <div class="space-y-4 p-2">
+            <div class="flex flex-col gap-2">
+              <label>{{ $t('hdrViewer.exposure') }}: {{ exposureLabel }}</label>
+              <input
+                v-model.number="viewer.exposureStops.value"
+                type="range"
+                min="-10"
+                max="10"
+                step="0.1"
+                class="w-full"
+                :aria-label="$t('hdrViewer.exposure')"
+              />
+            </div>
+            <Button
+              variant="secondary"
+              class="w-full"
+              @click="viewer.normalizeExposure"
+            >
+              {{ $t('hdrViewer.normalizeExposure') }}
+            </Button>
+          </div>
+
+          <div class="space-y-4 p-2">
+            <div class="flex flex-col gap-2">
+              <label>{{ $t('hdrViewer.channel') }}</label>
+              <select
+                v-model="viewer.channel.value"
+                class="bg-base-component-surface w-full rounded-sm px-2 py-1"
+                :aria-label="$t('hdrViewer.channel')"
+              >
+                <option v-for="mode in channelModes" :key="mode" :value="mode">
+                  {{ channelLabels[mode] }}
+                </option>
+              </select>
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <label>{{ $t('hdrViewer.sourceGamut') }}</label>
+              <select
+                v-model="viewer.gamut.value"
+                class="bg-base-component-surface w-full rounded-sm px-2 py-1"
+                :aria-label="$t('hdrViewer.sourceGamut')"
+              >
+                <option v-for="name in gamutNames" :key="name" :value="name">
+                  {{ name }}
+                </option>
+              </select>
+            </div>
+          </div>
+
+          <div class="space-y-4 p-2">
+            <div class="flex items-center gap-2">
+              <input
+                id="hdr-dither"
+                v-model="viewer.dither.value"
+                type="checkbox"
+                class="size-4 cursor-pointer accent-node-component-surface-highlight"
+              />
+              <label for="hdr-dither" class="cursor-pointer">
+                {{ $t('hdrViewer.dither') }}
+              </label>
+            </div>
+            <div class="flex items-center gap-2">
+              <input
+                id="hdr-clip"
+                v-model="viewer.clipWarnings.value"
+                type="checkbox"
+                class="size-4 cursor-pointer accent-node-component-surface-highlight"
+              />
+              <label for="hdr-clip" class="cursor-pointer">
+                {{ $t('hdrViewer.clipWarnings') }}
+              </label>
+            </div>
+          </div>
+
+          <div v-if="histogramPath" class="space-y-2 p-2">
+            <label>{{ $t('hdrViewer.histogram') }}</label>
+            <svg
+              viewBox="0 0 1 1"
+              preserveAspectRatio="none"
+              class="bg-base-component-surface aspect-3/2 w-full rounded-sm"
+            >
+              <path
+                :d="histogramPath"
+                :class="histogramColorClass"
+                fill="currentColor"
+                fill-opacity="0.5"
+                stroke="none"
+              />
+            </svg>
+          </div>
+
+          <div
+            v-if="viewer.stats.value"
+            class="space-y-1 p-2 text-xs tabular-nums"
+          >
+            <div v-if="viewer.dimensions.value" class="flex justify-between">
+              <span>{{ $t('hdrViewer.resolution') }}</span>
+              <span>{{ viewer.dimensions.value }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span>{{ $t('hdrViewer.min') }}</span>
+              <span>{{ formatNum(viewer.stats.value.min) }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span>{{ $t('hdrViewer.max') }}</span>
+              <span>{{ formatNum(viewer.stats.value.max) }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span>{{ $t('hdrViewer.mean') }}</span>
+              <span>{{ formatNum(viewer.stats.value.mean) }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span>{{ $t('hdrViewer.stdDev') }}</span>
+              <span>{{ formatNum(viewer.stats.value.stdDev) }}</span>
+            </div>
+            <div
+              v-if="viewer.stats.value.nanCount"
+              class="flex justify-between text-error"
+            >
+              <span>{{ $t('hdrViewer.nan') }}</span>
+              <span>{{ viewer.stats.value.nanCount }}</span>
+            </div>
+            <div
+              v-if="viewer.stats.value.infCount"
+              class="flex justify-between text-error"
+            >
+              <span>{{ $t('hdrViewer.inf') }}</span>
+              <span>{{ viewer.stats.value.infCount }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-4">
+        <div class="flex gap-2">
+          <Button variant="secondary" class="flex-1" @click="viewer.fitView">
+            {{ $t('hdrViewer.fitView') }}
+          </Button>
+          <Button variant="secondary" class="flex-1" @click="handleDownload">
+            {{ $t('g.downloadImage') }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { downloadFile } from '@/base/common/downloadUtil'
+import Button from '@/components/ui/button/Button.vue'
+import type { ChannelMode } from '@/composables/useHdrViewer'
+import { CHANNEL_MODES, useHdrViewer } from '@/composables/useHdrViewer'
+import { GAMUT_NAMES } from '@/renderer/hdr/colorGamut'
+import { toFullResolutionUrl } from '@/utils/hdrFormatUtil'
+import { histogramToPath } from '@/utils/histogramUtil'
+
+const { imageUrl } = defineProps<{ imageUrl: string }>()
+
+const { t } = useI18n()
+const viewer = useHdrViewer()
+const gamutNames = GAMUT_NAMES
+const channelModes = CHANNEL_MODES
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef')
+
+const exposureLabel = computed(() => {
+  const value = viewer.exposureStops.value
+  return `${value > 0 ? '+' : ''}${value.toFixed(1)}`
+})
+
+const histogramPath = computed(() =>
+  viewer.histogram.value ? histogramToPath(viewer.histogram.value) : ''
+)
+
+const histogramColorClass = computed(() => {
+  switch (viewer.channel.value) {
+    case 'r':
+      return 'text-red-500'
+    case 'g':
+      return 'text-green-500'
+    case 'b':
+      return 'text-blue-500'
+    default:
+      return 'text-base-foreground'
+  }
+})
+
+const channelLabels = computed<Record<ChannelMode, string>>(() => ({
+  rgb: t('hdrViewer.channels.rgb'),
+  r: t('hdrViewer.channels.r'),
+  g: t('hdrViewer.channels.g'),
+  b: t('hdrViewer.channels.b'),
+  a: t('hdrViewer.channels.a'),
+  luminance: t('hdrViewer.channels.luminance')
+}))
+
+function formatNum(value: number): string {
+  if (!Number.isFinite(value)) return String(value)
+  return Math.abs(value) >= 1000 || (value !== 0 && Math.abs(value) < 0.001)
+    ? value.toExponential(3)
+    : value.toFixed(4)
+}
+
+function handleDownload() {
+  downloadFile(toFullResolutionUrl(imageUrl))
+}
+
+onMounted(() => {
+  if (containerRef.value) void viewer.mount(containerRef.value, imageUrl)
+})
+</script>

src/components/load3d/controls/ViewerControls.vue

@@ -41,9 +41,7 @@ const openIn3DViewer = () => {
     component: Load3DViewerContent,
     props: props,
     dialogComponentProps: {
-      renderer: 'reka',
-      size: 'full',
-      contentClass: 'w-[80vw] h-[80vh] max-h-[80vh]',
+      style: 'width: 80vw; height: 80vh;',
       maximizable: true,
       onClose: async () => {
         await useLoad3dService().handleViewerClose(props.node)

src/components/palette/PaletteSwatchRow.test.ts

@@ -0,0 +1,70 @@
+/* eslint-disable testing-library/no-container, testing-library/no-node-access, testing-library/prefer-user-event */
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import PaletteSwatchRow from './PaletteSwatchRow.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: { palette: { swatchTitle: 'Edit', addColor: 'Add' } } }
+})
+
+function renderRow(modelValue: string[], max = 5) {
+  return render(PaletteSwatchRow, {
+    props: { modelValue, max },
+    global: { plugins: [i18n] }
+  })
+}
+
+const lastEmit = (emitted: () => Record<string, unknown[][]>) => {
+  const calls = emitted()['update:modelValue']
+  return calls[calls.length - 1][0]
+}
+
+describe('PaletteSwatchRow', () => {
+  it('renders one swatch per color', () => {
+    const { container } = renderRow(['#ff0000', '#00ff00'])
+    expect(container.querySelectorAll('[data-index]')).toHaveLength(2)
+  })
+
+  it('appends a color when the add button is clicked', async () => {
+    const { emitted } = renderRow(['#ff0000'])
+    await userEvent.click(screen.getByRole('button'))
+    expect(lastEmit(emitted)).toEqual(['#ff0000', '#ffffff'])
+  })
+
+  it('removes a color on right click', async () => {
+    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
+    await fireEvent.contextMenu(container.querySelector('[data-index="0"]')!)
+    expect(lastEmit(emitted)).toEqual(['#00ff00'])
+  })
+
+  it('hides the add button once the max is reached', () => {
+    renderRow(['#a', '#b'], 2)
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  it('writes a picked color back through the hidden color input', async () => {
+    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
+    await fireEvent.click(container.querySelector('[data-index="1"]')!)
+    const input = container.querySelector(
+      'input[type="color"]'
+    ) as HTMLInputElement
+    input.value = '#0000ff'
+    await fireEvent.input(input)
+    expect(lastEmit(emitted)).toEqual(['#ff0000', '#0000ff'])
+  })
+
+  it('starts a drag on pointer down without emitting', async () => {
+    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
+    await fireEvent.pointerDown(container.querySelector('[data-index="0"]')!, {
+      button: 0,
+      clientX: 5,
+      clientY: 5
+    })
+    expect(emitted()['update:modelValue']).toBeUndefined()
+  })
+})

src/components/palette/PaletteSwatchRow.vue

@@ -0,0 +1,48 @@
+<template>
+  <div ref="container" class="flex flex-wrap items-center gap-1">
+    <div
+      v-for="(hex, i) in modelValue"
+      :key="`${i}-${hex}`"
+      :data-index="i"
+      :data-hex="hex"
+      class="relative size-5 cursor-pointer rounded-sm border border-component-node-border"
+      :style="{ background: hex }"
+      :title="t('palette.swatchTitle')"
+      @click="openPicker(i, $event)"
+      @contextmenu.prevent.stop="remove(i)"
+      @pointerdown="onPointerDown(i, $event)"
+    />
+    <button
+      v-if="modelValue.length < max"
+      type="button"
+      class="h-5 rounded-sm border border-component-node-border bg-component-node-widget-background px-2 text-xs leading-none"
+      :title="t('palette.addColor')"
+      @click="addColor"
+    >
+      +
+    </button>
+    <input
+      ref="picker"
+      type="color"
+      class="pointer-events-none absolute size-0 opacity-0"
+      @input="onPickerInput"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { usePaletteSwatchRow } from '@/composables/palette/usePaletteSwatchRow'
+
+const { max = 5 } = defineProps<{ max?: number }>()
+const modelValue = defineModel<string[]>({ required: true })
+const { t } = useI18n()
+
+const container = useTemplateRef<HTMLDivElement>('container')
+const picker = useTemplateRef<HTMLInputElement>('picker')
+
+const { openPicker, onPickerInput, remove, addColor, onPointerDown } =
+  usePaletteSwatchRow({ modelValue, container, picker })
+</script>

src/components/palette/WidgetColors.test.ts

@@ -0,0 +1,54 @@
+/* eslint-disable testing-library/no-node-access, testing-library/no-container, testing-library/prefer-user-event */
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import WidgetColors from './WidgetColors.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: { palette: { swatchTitle: 'Edit', addColor: 'Add' } } }
+})
+
+function renderWidget(modelValue: string[], widget?: { name: string }) {
+  return render(WidgetColors, {
+    props: { modelValue, widget },
+    global: { plugins: [i18n] }
+  })
+}
+
+const cleanups: Array<() => void> = []
+afterEach(() => {
+  while (cleanups.length) cleanups.pop()?.()
+})
+
+describe('WidgetColors', () => {
+  it('renders the palette swatch row for each color', () => {
+    renderWidget(['#ff0000', '#00ff00'])
+    const root = screen.getByTestId('colors')
+    expect(root.querySelectorAll('[data-index]')).toHaveLength(2)
+  })
+
+  it('shows the widget name as an inline label', () => {
+    renderWidget(['#ff0000'], { name: 'color_palette' })
+    expect(screen.getByText('color_palette')).toBeInTheDocument()
+  })
+
+  it('emits an updated palette when a color is added', async () => {
+    const { emitted } = renderWidget([])
+    await userEvent.click(screen.getByRole('button'))
+    const calls = emitted()['update:modelValue'] as unknown[][]
+    expect(calls[calls.length - 1][0]).toEqual(['#ffffff'])
+  })
+
+  it('does not stop swatch pointer moves from reaching document drag handlers', async () => {
+    const { container } = renderWidget(['#ff0000'])
+    const onDocMove = vi.fn()
+    document.addEventListener('pointermove', onDocMove)
+    cleanups.push(() => document.removeEventListener('pointermove', onDocMove))
+    await fireEvent.pointerMove(container.querySelector('[data-index="0"]')!)
+    expect(onDocMove).toHaveBeenCalled()
+  })
+})

src/components/palette/WidgetColors.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="flex size-full items-center gap-2"
+    data-testid="colors"
+    @pointerdown.stop
+  >
+    <span
+      v-if="widget?.name"
+      class="shrink-0 truncate text-node-component-slot-text"
+    >
+      {{ widget.label || widget.name }}
+    </span>
+    <PaletteSwatchRow v-model="modelValue" :max="MAX_COLORS" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import PaletteSwatchRow from './PaletteSwatchRow.vue'
+
+const MAX_COLORS = 16
+
+const { widget } = defineProps<{
+  widget?: Pick<SimplifiedWidget<string[]>, 'name' | 'label'>
+}>()
+
+const modelValue = defineModel<string[]>({ default: () => [] })
+</script>

src/components/queue/JobHistoryActionsMenu.test.ts

@@ -54,17 +54,11 @@ vi.mock('@/stores/workspace/sidebarTabStore', () => ({
 
 import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
 
-const BaseTooltipStub = {
-  template: '<slot />'
-}
-
 const renderMenu = () =>
   render(JobHistoryActionsMenu, {
     global: {
       plugins: [i18n],
-      stubs: {
-        BaseTooltip: BaseTooltipStub
-      }
+      directives: { tooltip: () => {} }
     }
   })
 
@@ -123,9 +117,7 @@ describe('JobHistoryActionsMenu', () => {
       props: { onClearHistory: clearHistorySpy },
       global: {
         plugins: [i18n],
-        stubs: {
-          BaseTooltip: BaseTooltipStub
-        }
+        directives: { tooltip: () => {} }
       }
     })
 

src/components/queue/JobHistoryActionsMenu.vue

@@ -1,94 +1,91 @@
 <template>
-  <BaseTooltip :text="t('g.more')" side="top">
-    <div class="flex items-center gap-1">
-      <Popover :show-arrow="false">
-        <template #button>
+  <div class="flex items-center gap-1">
+    <Popover :show-arrow="false">
+      <template #button>
+        <Button
+          v-tooltip.top="moreTooltipConfig"
+          variant="textonly"
+          size="icon"
+          :aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
+        >
+          <i
+            class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
+          />
+        </Button>
+      </template>
+      <template #default="{ close }">
+        <div class="flex min-w-56 flex-col items-stretch font-inter">
           <Button
+            data-testid="docked-job-history-action"
+            class="w-full justify-between text-sm font-light"
             variant="textonly"
-            size="icon"
-            :aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
+            size="md"
+            @click="onToggleDockedJobHistory(close)"
           >
+            <span class="flex items-center gap-2">
+              <i
+                class="icon-[lucide--panel-left-close] size-4 text-text-secondary"
+              />
+              <span>{{
+                t('sideToolbar.queueProgressOverlay.dockedJobHistory')
+              }}</span>
+            </span>
             <i
-              class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
+              v-if="isQueuePanelV2Enabled"
+              class="icon-[lucide--check] size-4"
             />
           </Button>
-        </template>
-        <template #default="{ close }">
-          <div class="flex min-w-56 flex-col items-stretch font-inter">
+          <Button
+            data-testid="show-run-progress-bar-action"
+            class="w-full justify-between text-sm font-light"
+            variant="textonly"
+            size="md"
+            @click="onToggleRunProgressBar"
+          >
+            <span class="flex items-center gap-2">
+              <i class="icon-[lucide--hourglass] size-4 text-text-secondary" />
+              <span>{{
+                t('sideToolbar.queueProgressOverlay.showRunProgressBar')
+              }}</span>
+            </span>
+            <i
+              v-if="isRunProgressBarEnabled"
+              class="icon-[lucide--check] size-4"
+            />
+          </Button>
+          <!-- TODO: Bug in assets sidebar panel derives assets from history, so despite this not deleting the assets, it still effectively shows to the user as deleted -->
+          <template v-if="showClearHistoryAction">
+            <div class="my-1 border-t border-interface-stroke" />
             <Button
-              data-testid="docked-job-history-action"
-              class="w-full justify-between text-sm font-light"
+              data-testid="clear-history-action"
+              class="h-auto min-h-8 w-full items-start justify-start whitespace-normal"
               variant="textonly"
               size="md"
-              @click="onToggleDockedJobHistory(close)"
+              @click="onClearHistoryFromMenu(close)"
             >
-              <span class="flex items-center gap-2">
-                <i
-                  class="icon-[lucide--panel-left-close] size-4 text-text-secondary"
-                />
-                <span>{{
-                  t('sideToolbar.queueProgressOverlay.dockedJobHistory')
-                }}</span>
-              </span>
               <i
-                v-if="isQueuePanelV2Enabled"
-                class="icon-[lucide--check] size-4"
+                class="icon-[lucide--trash-2] size-4 shrink-0 self-center text-destructive-background"
               />
-            </Button>
-            <Button
-              data-testid="show-run-progress-bar-action"
-              class="w-full justify-between text-sm font-light"
-              variant="textonly"
-              size="md"
-              @click="onToggleRunProgressBar"
-            >
-              <span class="flex items-center gap-2">
-                <i
-                  class="icon-[lucide--hourglass] size-4 text-text-secondary"
-                />
-                <span>{{
-                  t('sideToolbar.queueProgressOverlay.showRunProgressBar')
-                }}</span>
-              </span>
-              <i
-                v-if="isRunProgressBarEnabled"
-                class="icon-[lucide--check] size-4"
-              />
-            </Button>
-            <!-- TODO: Bug in assets sidebar panel derives assets from history, so despite this not deleting the assets, it still effectively shows to the user as deleted -->
-            <template v-if="showClearHistoryAction">
-              <div class="my-1 border-t border-interface-stroke" />
-              <Button
-                data-testid="clear-history-action"
-                class="h-auto min-h-8 w-full items-start justify-start whitespace-normal"
-                variant="textonly"
-                size="md"
-                @click="onClearHistoryFromMenu(close)"
+              <span
+                class="flex flex-col items-start text-left leading-tight wrap-break-word"
               >
-                <i
-                  class="icon-[lucide--trash-2] size-4 shrink-0 self-center text-destructive-background"
-                />
-                <span
-                  class="flex flex-col items-start text-left leading-tight wrap-break-word"
-                >
-                  <span class="text-sm font-light">
-                    {{ t('sideToolbar.queueProgressOverlay.clearHistory') }}
-                  </span>
-                  <span class="text-xs font-light text-text-secondary">
-                    {{
-                      t(
-                        'sideToolbar.queueProgressOverlay.clearHistoryMenuAssetsNote'
-                      )
-                    }}
-                  </span>
+                <span class="text-sm font-light">
+                  {{ t('sideToolbar.queueProgressOverlay.clearHistory') }}
                 </span>
-              </Button>
-            </template>
-          </div>
-        </template>
-      </Popover>
-    </div>
-  </BaseTooltip>
+                <span class="text-xs font-light text-text-secondary">
+                  {{
+                    t(
+                      'sideToolbar.queueProgressOverlay.clearHistoryMenuAssetsNote'
+                    )
+                  }}
+                </span>
+              </span>
+            </Button>
+          </template>
+        </div>
+      </template>
+    </Popover>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -98,7 +95,7 @@ import { useI18n } from 'vue-i18n'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
-import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useSurveyFeatureTracking } from '@/platform/surveys/useSurveyFeatureTracking'
@@ -113,6 +110,7 @@ const settingStore = useSettingStore()
 const sidebarTabStore = useSidebarTabStore()
 const { trackFeatureUsed } = useSurveyFeatureTracking('queue-progress-overlay')
 
+const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
 const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
   useQueueFeatureFlags()
 const showClearHistoryAction = computed(() => !isCloud)

src/components/queue/QueueOverlayActive.test.ts

@@ -4,6 +4,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import QueueOverlayActive from './QueueOverlayActive.vue'
+import * as tooltipConfig from '@/composables/useTooltipConfig'
 
 const i18n = createI18n({
   legacy: false,
@@ -27,8 +28,9 @@ const i18n = createI18n({
   }
 })
 
-const BaseTooltipStub = {
-  template: '<slot />'
+const tooltipDirectiveStub = {
+  mounted: vi.fn(),
+  updated: vi.fn()
 }
 
 const defaultProps = {
@@ -47,8 +49,8 @@ const renderComponent = (props: Record<string, unknown> = {}) =>
     props: { ...defaultProps, ...props },
     global: {
       plugins: [i18n],
-      stubs: {
-        BaseTooltip: BaseTooltipStub
+      directives: {
+        tooltip: tooltipDirectiveStub
       }
     }
   })
@@ -109,4 +111,13 @@ describe('QueueOverlayActive', () => {
       screen.queryByRole('button', { name: 'Clear queued' })
     ).not.toBeInTheDocument()
   })
+
+  it('builds tooltip configs with translated strings', () => {
+    const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
+
+    renderComponent()
+
+    expect(spy).toHaveBeenCalledWith('Cancel job')
+    expect(spy).toHaveBeenCalledWith('Clear queue')
+  })
 })

src/components/queue/QueueOverlayActive.vue

@@ -42,22 +42,18 @@
               t('sideToolbar.queueProgressOverlay.running')
             }}</span>
           </span>
-          <BaseTooltip
+          <Button
             v-if="runningCount > 0"
-            :text="t('sideToolbar.queueProgressOverlay.cancelJobTooltip')"
-            side="top"
+            v-tooltip.top="cancelJobTooltip"
+            variant="destructive"
+            size="icon"
+            :aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
+            @click="$emit('interruptAll')"
           >
-            <Button
-              variant="destructive"
-              size="icon"
-              :aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
-              @click="$emit('interruptAll')"
-            >
-              <i
-                class="icon-[lucide--x] block size-4 leading-none text-text-primary"
-              />
-            </Button>
-          </BaseTooltip>
+            <i
+              class="icon-[lucide--x] block size-4 leading-none text-text-primary"
+            />
+          </Button>
         </div>
 
         <div class="flex items-center gap-2">
@@ -67,22 +63,18 @@
               t('sideToolbar.queueProgressOverlay.queuedSuffix')
             }}</span>
           </span>
-          <BaseTooltip
+          <Button
             v-if="queuedCount > 0"
-            :text="t('sideToolbar.queueProgressOverlay.clearQueueTooltip')"
-            side="top"
+            v-tooltip.top="clearQueueTooltip"
+            variant="destructive"
+            size="icon"
+            :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
+            @click="$emit('clearQueued')"
           >
-            <Button
-              variant="destructive"
-              size="icon"
-              :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
-              @click="$emit('clearQueued')"
-            >
-              <i
-                class="icon-[lucide--list-x] block size-4 leading-none text-text-primary"
-              />
-            </Button>
-          </BaseTooltip>
+            <i
+              class="icon-[lucide--list-x] block size-4 leading-none text-text-primary"
+            />
+          </Button>
         </div>
       </div>
 
@@ -99,10 +91,11 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 
 defineProps<{
   totalProgressStyle: Record<string, string>
@@ -122,4 +115,10 @@ defineEmits<{
 }>()
 
 const { t } = useI18n()
+const cancelJobTooltip = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.cancelJobTooltip'))
+)
+const clearQueueTooltip = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.clearQueueTooltip'))
+)
 </script>

src/components/queue/QueueOverlayHeader.test.ts

@@ -49,9 +49,11 @@ vi.mock('@/stores/workspace/sidebarTabStore', () => ({
 }))
 
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
+import * as tooltipConfig from '@/composables/useTooltipConfig'
 
-const BaseTooltipStub = {
-  template: '<slot />'
+const tooltipDirectiveStub = {
+  mounted: vi.fn(),
+  updated: vi.fn()
 }
 
 const renderHeader = (props = {}) =>
@@ -63,9 +65,7 @@ const renderHeader = (props = {}) =>
     },
     global: {
       plugins: [i18n],
-      stubs: {
-        BaseTooltip: BaseTooltipStub
-      }
+      directives: { tooltip: tooltipDirectiveStub }
     }
   })
 
@@ -108,6 +108,7 @@ describe('QueueOverlayHeader', () => {
 
   it('emits clear history from the menu', async () => {
     const user = userEvent.setup()
+    const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
     const clearHistorySpy = vi.fn()
 
     renderHeader({ onClearHistory: clearHistorySpy })
@@ -115,6 +116,7 @@ describe('QueueOverlayHeader', () => {
     expect(
       screen.getByRole('button', { name: 'More options' })
     ).toBeInTheDocument()
+    expect(spy).toHaveBeenCalledWith('More')
 
     await user.click(screen.getByTestId('clear-history-action'))
     expect(popoverCloseSpy).toHaveBeenCalledTimes(1)

src/components/queue/QueueOverlayHeader.vue

@@ -11,31 +11,28 @@
       <span :class="{ 'opacity-50': queuedCount === 0 }">{{
         t('sideToolbar.queueProgressOverlay.clearQueueTooltip')
       }}</span>
-      <BaseTooltip
-        :text="t('sideToolbar.queueProgressOverlay.clearAllJobsTooltip')"
-        side="top"
+      <Button
+        v-tooltip.top="clearAllJobsTooltip"
+        variant="destructive"
+        size="icon"
+        :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
+        :disabled="queuedCount === 0"
+        @click="$emit('clearQueued')"
       >
-        <Button
-          variant="destructive"
-          size="icon"
-          :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
-          :disabled="queuedCount === 0"
-          @click="$emit('clearQueued')"
-        >
-          <i class="icon-[lucide--list-x] size-4" />
-        </Button>
-      </BaseTooltip>
+        <i class="icon-[lucide--list-x] size-4" />
+      </Button>
     </div>
     <JobHistoryActionsMenu @clear-history="$emit('clearHistory')" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
 import Button from '@/components/ui/button/Button.vue'
-import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 
 defineProps<{
   headerTitle: string
@@ -48,4 +45,7 @@ defineEmits<{
 }>()
 
 const { t } = useI18n()
+const clearAllJobsTooltip = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.clearAllJobsTooltip'))
+)
 </script>

src/components/queue/job/JobFilterActions.vue

@@ -11,119 +11,103 @@
       class="flex shrink-0 items-center gap-2"
       :class="{ 'ml-2': !showSearch }"
     >
-      <BaseTooltip
-        :text="t('sideToolbar.queueProgressOverlay.filterBy')"
-        side="top"
-      >
-        <div>
-          <Popover :show-arrow="false">
-            <template #button>
+      <Popover :show-arrow="false">
+        <template #button>
+          <Button
+            v-tooltip.top="filterTooltipConfig"
+            variant="secondary"
+            size="icon"
+            :aria-label="t('sideToolbar.queueProgressOverlay.filterJobs')"
+          >
+            <i class="icon-[lucide--list-filter] size-4" />
+            <span
+              v-if="selectedWorkflowFilter !== 'all'"
+              class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
+            />
+          </Button>
+        </template>
+        <template #default="{ close }">
+          <div class="flex min-w-48 flex-col items-stretch">
+            <Button
+              class="w-full justify-between"
+              variant="textonly"
+              size="md"
+              @click="onSelectWorkflowFilter('all', close)"
+            >
+              <span>{{
+                t('sideToolbar.queueProgressOverlay.filterAllWorkflows')
+              }}</span>
+              <i
+                v-if="selectedWorkflowFilter === 'all'"
+                class="icon-[lucide--check] size-4"
+              />
+            </Button>
+            <div class="mx-2 mt-1 h-px" />
+            <Button
+              class="w-full justify-between"
+              variant="textonly"
+              size="md"
+              @click="onSelectWorkflowFilter('current', close)"
+            >
+              <span>{{
+                t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')
+              }}</span>
+              <i
+                v-if="selectedWorkflowFilter === 'current'"
+                class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
+              />
+            </Button>
+          </div>
+        </template>
+      </Popover>
+      <Popover :show-arrow="false">
+        <template #button>
+          <Button
+            v-tooltip.top="sortTooltipConfig"
+            variant="secondary"
+            size="icon"
+            :aria-label="t('sideToolbar.queueProgressOverlay.sortJobs')"
+          >
+            <i class="icon-[lucide--arrow-up-down] size-4" />
+            <span
+              v-if="selectedSortMode !== 'mostRecent'"
+              class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
+            />
+          </Button>
+        </template>
+        <template #default="{ close }">
+          <div class="flex min-w-48 flex-col items-stretch">
+            <template v-for="(mode, index) in jobSortModes" :key="mode">
               <Button
-                variant="secondary"
-                size="icon"
-                :aria-label="t('sideToolbar.queueProgressOverlay.filterJobs')"
+                class="w-full justify-between"
+                variant="textonly"
+                size="md"
+                @click="onSelectSortMode(mode, close)"
               >
-                <i class="icon-[lucide--list-filter] size-4" />
-                <span
-                  v-if="selectedWorkflowFilter !== 'all'"
-                  class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
+                <span>{{ sortLabel(mode) }}</span>
+                <i
+                  v-if="selectedSortMode === mode"
+                  class="icon-[lucide--check] size-4 text-text-secondary"
                 />
               </Button>
+              <div
+                v-if="index < jobSortModes.length - 1"
+                class="mx-2 mt-1 h-px"
+              />
             </template>
-            <template #default="{ close }">
-              <div class="flex min-w-48 flex-col items-stretch">
-                <Button
-                  class="w-full justify-between"
-                  variant="textonly"
-                  size="md"
-                  @click="onSelectWorkflowFilter('all', close)"
-                >
-                  <span>{{
-                    t('sideToolbar.queueProgressOverlay.filterAllWorkflows')
-                  }}</span>
-                  <i
-                    v-if="selectedWorkflowFilter === 'all'"
-                    class="icon-[lucide--check] size-4"
-                  />
-                </Button>
-                <div class="mx-2 mt-1 h-px" />
-                <Button
-                  class="w-full justify-between"
-                  variant="textonly"
-                  size="md"
-                  @click="onSelectWorkflowFilter('current', close)"
-                >
-                  <span>{{
-                    t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')
-                  }}</span>
-                  <i
-                    v-if="selectedWorkflowFilter === 'current'"
-                    class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
-                  />
-                </Button>
-              </div>
-            </template>
-          </Popover>
-        </div>
-      </BaseTooltip>
-      <BaseTooltip
-        :text="t('sideToolbar.queueProgressOverlay.sortBy')"
-        side="top"
-      >
-        <div>
-          <Popover :show-arrow="false">
-            <template #button>
-              <Button
-                variant="secondary"
-                size="icon"
-                :aria-label="t('sideToolbar.queueProgressOverlay.sortJobs')"
-              >
-                <i class="icon-[lucide--arrow-up-down] size-4" />
-                <span
-                  v-if="selectedSortMode !== 'mostRecent'"
-                  class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
-                />
-              </Button>
-            </template>
-            <template #default="{ close }">
-              <div class="flex min-w-48 flex-col items-stretch">
-                <template v-for="(mode, index) in jobSortModes" :key="mode">
-                  <Button
-                    class="w-full justify-between"
-                    variant="textonly"
-                    size="md"
-                    @click="onSelectSortMode(mode, close)"
-                  >
-                    <span>{{ sortLabel(mode) }}</span>
-                    <i
-                      v-if="selectedSortMode === mode"
-                      class="icon-[lucide--check] size-4 text-text-secondary"
-                    />
-                  </Button>
-                  <div
-                    v-if="index < jobSortModes.length - 1"
-                    class="mx-2 mt-1 h-px"
-                  />
-                </template>
-              </div>
-            </template>
-          </Popover>
-        </div>
-      </BaseTooltip>
-      <BaseTooltip
+          </div>
+        </template>
+      </Popover>
+      <Button
         v-if="showAssetsAction"
-        :text="t('sideToolbar.queueProgressOverlay.showAssets')"
-        side="top"
+        v-tooltip.top="showAssetsTooltipConfig"
+        variant="secondary"
+        size="icon"
+        :aria-label="t('sideToolbar.queueProgressOverlay.showAssetsPanel')"
+        @click="emit('showAssets')"
       >
-        <Button
-          variant="secondary"
-          size="icon"
-          :aria-label="t('sideToolbar.queueProgressOverlay.showAssetsPanel')"
-          @click="emit('showAssets')"
-        >
-          <i class="icon-[comfy--image-ai-edit] size-4" />
-        </Button>
-      </BaseTooltip>
+        <i class="icon-[comfy--image-ai-edit] size-4" />
+      </Button>
     </div>
   </div>
 </template>
@@ -137,7 +121,7 @@ import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { jobSortModes } from '@/composables/queue/useJobList'
 import type { JobSortMode } from '@/composables/queue/useJobList'
-import BaseTooltip from '@/components/ui/tooltip/BaseTooltip.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSurveyFeatureTracking } from '@/platform/surveys/useSurveyFeatureTracking'
 
 const {
@@ -166,6 +150,15 @@ const emit = defineEmits<{
 const { t } = useI18n()
 const { trackFeatureUsed } = useSurveyFeatureTracking('queue-progress-overlay')
 
+const filterTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.filterBy'))
+)
+const sortTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.sortBy'))
+)
+const showAssetsTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.showAssets'))
+)
 const showAssetsAction = computed(() => !hideShowAssetsAction)
 const searchPlaceholderText = computed(
   () => searchPlaceholder ?? t('sideToolbar.queueProgressOverlay.searchJobs')

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

@@ -55,10 +55,6 @@ const i18n = createI18n({
   }
 })
 
-const BaseTooltipStub = {
-  template: '<slot />'
-}
-
 describe('JobFiltersBar', () => {
   it('emits showAssets when the assets icon button is clicked', async () => {
     const user = userEvent.setup()
@@ -74,9 +70,7 @@ describe('JobFiltersBar', () => {
       },
       global: {
         plugins: [i18n],
-        stubs: {
-          BaseTooltip: BaseTooltipStub
-        }
+        directives: { tooltip: () => undefined }
       }
     })
 
@@ -96,9 +90,7 @@ describe('JobFiltersBar', () => {
       },
       global: {
         plugins: [i18n],
-        stubs: {
-          BaseTooltip: BaseTooltipStub
-        }
+        directives: { tooltip: () => undefined }
       }
     })
 

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -12,15 +12,14 @@ import {
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { widgetPromotedSource } from '@/core/graph/subgraph/promotedInputWidget'
 import { isWidgetPromotedOnSubgraphNode } from '@/core/graph/subgraph/promotionUtils'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { DraggableList } from '@/scripts/ui/draggableList'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@comfyorg/tailwind-utils'
@@ -147,17 +146,16 @@ function isWidgetShownOnParents(
   widgetNode: LGraphNode,
   widget: IBaseWidget
 ): boolean {
-  const source = widgetPromotedSource(widgetNode, widget)
   return parents.some((parent) => {
-    if (source) {
+    if (isPromotedWidgetView(widget)) {
       const interiorNodeId =
         String(widgetNode.id) === String(parent.id)
-          ? source.nodeId
+          ? widget.sourceNodeId
           : String(widgetNode.id)
 
       return isWidgetPromotedOnSubgraphNode(parent, {
         sourceNodeId: interiorNodeId,
-        sourceWidgetName: source.widgetName
+        sourceWidgetName: widget.sourceWidgetName
       })
     }
     return isWidgetPromotedOnSubgraphNode(parent, {
@@ -236,10 +234,7 @@ function navigateToErrorTab() {
   rightSidePanelStore.openPanel('errors')
 }
 
-function setWidgetValue(widget: IBaseWidget, value: WidgetValue) {
-  // Store-backed widgets (interior node widgets and promoted subgraph inputs)
-  // are addressed by widgetId; writing there keeps the displayed value in sync.
-  if (widget.widgetId) useWidgetValueStore().setValue(widget.widgetId, value)
+function writeWidgetValue(widget: IBaseWidget, value: WidgetValue) {
   widget.value = value
   widget.callback?.(value)
   canvasStore.canvas?.setDirty(true, true)
@@ -250,18 +245,18 @@ function handleResetAllWidgets() {
     const spec = nodeDefStore.getInputSpecForWidget(widgetNode, widget.name)
     const defaultValue = getWidgetDefaultValue(spec)
     if (defaultValue !== undefined) {
-      setWidgetValue(widget, defaultValue)
+      writeWidgetValue(widget, defaultValue)
     }
   }
 }
 
 function handleWidgetValueUpdate(widget: IBaseWidget, newValue: WidgetValue) {
   if (newValue === undefined) return
-  setWidgetValue(widget, newValue)
+  writeWidgetValue(widget, newValue)
 }
 
 function handleWidgetReset(widget: IBaseWidget, newValue: WidgetValue) {
-  setWidgetValue(widget, newValue)
+  writeWidgetValue(widget, newValue)
 }
 
 defineExpose({

src/components/rightSidePanel/parameters/TabSubgraphInputs.test.ts

@@ -1,127 +0,0 @@
-import { render } from '@testing-library/vue'
-import { createTestingPinia } from '@pinia/testing'
-import { setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import { promoteValueWidgetViaSubgraphInput } from '@/core/graph/subgraph/promotionUtils'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { LGraph } from '@/lib/litegraph/src/litegraph'
-import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
-import {
-  createTestSubgraph,
-  createTestSubgraphNode
-} from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
-import { widgetId } from '@/types/widgetId'
-
-import TabSubgraphInputs from './TabSubgraphInputs.vue'
-
-vi.mock('@/services/litegraphService', () => ({
-  useLitegraphService: () => ({ updatePreviews: vi.fn() })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: { rightSidePanel: { inputs: 'Inputs', inputsNone: 'None' } } }
-})
-
-const captured: { rows: { node: LGraphNode; widget: IBaseWidget }[] } = {
-  rows: []
-}
-
-const SectionWidgetsStub = {
-  props: ['widgets', 'node', 'parents'],
-  setup(props: Record<string, unknown>) {
-    captured.rows = props.widgets as {
-      node: LGraphNode
-      widget: IBaseWidget
-    }[]
-    return () => null
-  }
-}
-
-function buildHostWithPromotedSeed(): {
-  host: SubgraphNode
-  sourceNode: LGraphNode
-} {
-  const subgraph = createTestSubgraph()
-  const host = createTestSubgraphNode(subgraph)
-  const graph = host.graph as LGraph
-  graph.add(host)
-
-  const sourceNode = new LGraphNode('Sampler')
-  const input = sourceNode.addInput('seed', 'INT')
-  const seedWidget = sourceNode.addWidget('number', 'seed', 42, () => {})
-  input.widget = { name: seedWidget.name }
-  subgraph.add(sourceNode)
-
-  promoteValueWidgetViaSubgraphInput(host, sourceNode, seedWidget)
-  return { host, sourceNode }
-}
-
-function renderPanel(node: SubgraphNode) {
-  return render(TabSubgraphInputs, {
-    props: { node },
-    global: {
-      plugins: [i18n],
-      stubs: {
-        SectionWidgets: SectionWidgetsStub,
-        AsyncSearchInput: true,
-        CollapseToggleButton: true
-      }
-    }
-  })
-}
-
-describe('TabSubgraphInputs', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia({ stubActions: false }))
-    captured.rows = []
-    vi.clearAllMocks()
-  })
-
-  it('lists a subgraph node promoted widget as a store-backed parameter row', () => {
-    const { host } = buildHostWithPromotedSeed()
-
-    renderPanel(host)
-
-    const seedRow = captured.rows.find((row) => row.widget.name === 'seed')
-    expect(seedRow).toBeDefined()
-    expect(seedRow?.node.id).toBe(host.id)
-    expect(seedRow?.widget.type).toBe('number')
-    expect(seedRow?.widget.widgetId).toBe(
-      widgetId(host.rootGraph.id, host.id, 'seed')
-    )
-    expect(seedRow?.widget.value).toBe(42)
-  })
-
-  it('reflects the current host widget value from the store', () => {
-    const { host } = buildHostWithPromotedSeed()
-    const id = widgetId(host.rootGraph.id, host.id, 'seed')
-    useWidgetValueStore().setValue(id, 7)
-
-    renderPanel(host)
-
-    const seedRow = captured.rows.find((row) => row.widget.name === 'seed')
-    expect(seedRow?.widget.value).toBe(7)
-  })
-
-  it('reflects value changes through the same descriptor without rebuilding it', () => {
-    const { host } = buildHostWithPromotedSeed()
-    renderPanel(host)
-
-    const seedRow = captured.rows.find((row) => row.widget.name === 'seed')!
-    expect(seedRow.widget.value).toBe(42)
-
-    // A value edit must not require a new descriptor object: the same row
-    // reflects the store change via its live getter, keeping render keys stable.
-    useWidgetValueStore().setValue(
-      widgetId(host.rootGraph.id, host.id, 'seed'),
-      100
-    )
-    expect(seedRow.widget.value).toBe(100)
-  })
-})

src/components/rightSidePanel/parameters/TabSubgraphInputs.vue

@@ -3,13 +3,14 @@ import { storeToRefs } from 'pinia'
 import { computed, nextTick, ref, shallowRef, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { promotedInputWidgets } from '@/core/graph/subgraph/promotedInputWidget'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import {
   getWidgetName,
   isWidgetPromotedOnSubgraphNode,
   reorderSubgraphInputsByWidgetOrder
 } from '@/core/graph/subgraph/promotionUtils'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import CollapseToggleButton from '@/components/rightSidePanel/layout/CollapseToggleButton.vue'
@@ -44,6 +45,32 @@ const isAllCollapsed = computed({
 })
 const advancedInputsSectionRef = useTemplateRef('advancedInputsSectionRef')
 
+function isSamePromotedWidget(a: IBaseWidget, b: IBaseWidget): boolean {
+  return (
+    isPromotedWidgetView(a) &&
+    isPromotedWidgetView(b) &&
+    a.sourceNodeId === b.sourceNodeId &&
+    a.sourceWidgetName === b.sourceWidgetName
+  )
+}
+
+function getPromotedWidgets(): IBaseWidget[] {
+  const inputWidgets = node.inputs
+    .map((input) => input._widget)
+    .filter((widget): widget is IBaseWidget =>
+      Boolean(widget && isPromotedWidgetView(widget))
+    )
+  const extraWidgets = (node.widgets ?? []).filter(
+    (widget) =>
+      isPromotedWidgetView(widget) &&
+      !inputWidgets.some((inputWidget) =>
+        isSamePromotedWidget(inputWidget, widget)
+      )
+  )
+
+  return [...inputWidgets, ...extraWidgets]
+}
+
 watch(
   focusedSection,
   async (section) => {
@@ -66,7 +93,7 @@ watch(
 )
 
 const widgetsList = computed((): NodeWidgetsList => {
-  return promotedInputWidgets(node).map((widget) => ({ node, widget }))
+  return getPromotedWidgets().map((widget) => ({ node, widget }))
 })
 
 const advancedInputsWidgets = computed((): NodeWidgetsList => {

src/components/rightSidePanel/parameters/WidgetActions.vue

@@ -5,9 +5,8 @@ import { useI18n } from 'vue-i18n'
 
 import MoreButton from '@/components/button/MoreButton.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { widgetPromotedSource } from '@/core/graph/subgraph/promotedInputWidget'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import {
-  demotePromotedInput,
   demoteWidget,
   isLinkedPromotion,
   promoteWidget
@@ -17,7 +16,6 @@ import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
 import { getWidgetDefaultValue, promptWidgetLabel } from '@/utils/widgetUtil'
 import type { WidgetValue } from '@/utils/widgetUtil'
@@ -47,10 +45,8 @@ const { t } = useI18n()
 
 const hasParents = computed(() => parents?.length > 0)
 const isLinked = computed(() => {
-  if (!node.isSubgraphNode()) return false
-  const source = widgetPromotedSource(node, widget)
-  if (!source) return false
-  return isLinkedPromotion(node, source.nodeId, source.widgetName)
+  if (!node.isSubgraphNode() || !isPromotedWidgetView(widget)) return false
+  return isLinkedPromotion(node, widget.sourceNodeId, widget.sourceWidgetName)
 })
 const canToggleVisibility = computed(() => hasParents.value && !isLinked.value)
 const favoriteNode = computed(() =>
@@ -68,16 +64,9 @@ const defaultValue = computed(() => getWidgetDefaultValue(inputSpec.value))
 
 const hasDefault = computed(() => defaultValue.value !== undefined)
 
-const currentValue = computed(
-  () =>
-    (widget.widgetId &&
-      useWidgetValueStore().getWidget(widget.widgetId)?.value) ??
-    widget.value
-)
-
 const isCurrentValueDefault = computed(() => {
   if (!hasDefault.value) return true
-  return isEqual(currentValue.value, defaultValue.value)
+  return isEqual(widget.value, defaultValue.value)
 })
 
 async function handleRename() {
@@ -88,15 +77,21 @@ async function handleRename() {
 function handleHideInput() {
   if (!parents?.length) return
 
-  const source = widgetPromotedSource(node, widget)
-  if (source) {
+  if (isPromotedWidgetView(widget)) {
     for (const parent of parents) {
       const sourceNodeId =
-        String(node.id) === String(parent.id) ? source.nodeId : String(node.id)
-      demotePromotedInput(parent, {
-        sourceNodeId,
-        sourceWidgetName: source.widgetName
-      })
+        String(node.id) === String(parent.id)
+          ? widget.sourceNodeId
+          : String(node.id)
+      demoteWidget(
+        {
+          id: sourceNodeId,
+          title: node.title,
+          type: node.type
+        },
+        widget,
+        [parent]
+      )
     }
     canvasStore.canvas?.setDirty(true, true)
   } else {

src/components/rightSidePanel/parameters/WidgetItem.test.ts

@@ -7,8 +7,6 @@ import { createI18n } from 'vue-i18n'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
-import { widgetId } from '@/types/widgetId'
 import WidgetItem from './WidgetItem.vue'
 
 const { mockGetInputSpecForWidget, StubWidgetComponent } = vi.hoisted(() => ({
@@ -44,6 +42,10 @@ vi.mock('@/composables/graph/useGraphNodeManager', () => ({
   getControlWidget: vi.fn(() => undefined)
 }))
 
+vi.mock('@/core/graph/subgraph/resolveConcretePromotedWidget', () => ({
+  resolvePromotedWidgetSource: vi.fn(() => undefined)
+}))
+
 vi.mock(
   '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry',
   () => ({
@@ -94,6 +96,43 @@ function createMockWidget(overrides: Partial<IBaseWidget> = {}): IBaseWidget {
   } as IBaseWidget
 }
 
+/**
+ * Creates a mock PromotedWidgetView that mirrors the real class:
+ * properties like name, type, value, options are prototype getters,
+ * NOT own properties — so object spread loses them.
+ */
+function createMockPromotedWidgetView(
+  sourceOptions: IBaseWidget['options'] = {
+    values: ['model_a.safetensors', 'model_b.safetensors']
+  }
+): IBaseWidget {
+  class MockPromotedWidgetView {
+    readonly sourceNodeId = '42'
+    readonly sourceWidgetName = 'ckpt_name'
+    readonly serialize = false
+
+    get name(): string {
+      return 'ckpt_name'
+    }
+    get type(): string {
+      return 'combo'
+    }
+    get value(): unknown {
+      return 'model_a.safetensors'
+    }
+    get options(): IBaseWidget['options'] {
+      return sourceOptions
+    }
+    get label(): string | undefined {
+      return undefined
+    }
+    get y(): number {
+      return 0
+    }
+  }
+  return fromAny<IBaseWidget, unknown>(new MockPromotedWidgetView())
+}
+
 function renderWidgetItem(
   widget: IBaseWidget,
   node: LGraphNode = createMockNode()
@@ -128,7 +167,7 @@ describe('WidgetItem', () => {
     vi.clearAllMocks()
   })
 
-  describe('widget state rendering', () => {
+  describe('promoted widget options', () => {
     it('passes options from a regular widget to the widget component', () => {
       const widget = createMockWidget({
         options: { values: ['a', 'b', 'c'] }
@@ -141,63 +180,35 @@ describe('WidgetItem', () => {
       })
     })
 
-    it('passes options from widget state to the widget component', () => {
+    it('passes options from a PromotedWidgetView to the widget component', () => {
       const expectedOptions = {
         values: ['model_a.safetensors', 'model_b.safetensors']
       }
-      const id = widgetId('test-graph-id', 1, 'ckpt_name')
-      const widget = createMockWidget({ widgetId: id, name: 'ckpt_name' })
-      useWidgetValueStore().registerWidget(id, {
-        type: 'combo',
-        value: 'model_a.safetensors',
-        options: expectedOptions
-      })
-
+      const widget = createMockPromotedWidgetView(expectedOptions)
       const { container } = renderWidgetItem(widget)
       const stub = getStubWidget(container)
 
       expect(stub.options).toEqual(expectedOptions)
     })
 
-    it('passes type from widget state to the widget component', () => {
-      const id = widgetId('test-graph-id', 1, 'ckpt_name')
-      const widget = createMockWidget({ widgetId: id, type: 'string' })
-      useWidgetValueStore().registerWidget(id, {
-        type: 'combo',
-        value: 'model_a.safetensors',
-        options: { values: ['model_a.safetensors'] }
-      })
-
+    it('passes type from a PromotedWidgetView to the widget component', () => {
+      const widget = createMockPromotedWidgetView()
       const { container } = renderWidgetItem(widget)
       const stub = getStubWidget(container)
 
       expect(stub.type).toBe('combo')
     })
 
-    it('passes name from widget state to the widget component', () => {
-      const id = widgetId('test-graph-id', 1, 'ckpt_name')
-      const widget = createMockWidget({ widgetId: id, name: 'source_name' })
-      useWidgetValueStore().registerWidget(id, {
-        type: 'combo',
-        value: 'model_a.safetensors',
-        options: { values: ['model_a.safetensors'] }
-      })
-
+    it('passes name from a PromotedWidgetView to the widget component', () => {
+      const widget = createMockPromotedWidgetView()
       const { container } = renderWidgetItem(widget)
       const stub = getStubWidget(container)
 
       expect(stub.name).toBe('ckpt_name')
     })
 
-    it('passes value from widget state to the widget component', () => {
-      const id = widgetId('test-graph-id', 1, 'ckpt_name')
-      const widget = createMockWidget({ widgetId: id, value: 'source value' })
-      useWidgetValueStore().registerWidget(id, {
-        type: 'combo',
-        value: 'model_a.safetensors',
-        options: { values: ['model_a.safetensors'] }
-      })
-
+    it('passes value from a PromotedWidgetView to the widget component', () => {
+      const widget = createMockPromotedWidgetView()
       const { container } = renderWidgetItem(widget)
       const stub = getStubWidget(container)
 

src/components/rightSidePanel/parameters/WidgetItem.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import EditableText from '@/components/common/EditableText.vue'
 import { getControlWidget } from '@/composables/graph/useGraphNodeManager'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
+import { resolvePromotedWidgetSource } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
 import { st } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
@@ -17,12 +18,11 @@ import {
 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import {
-  stripGraphPrefix,
-  useWidgetValueStore
+  useWidgetValueStore,
+  stripGraphPrefix
 } from '@/stores/widgetValueStore'
 import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-import { widgetId } from '@/types/widgetId'
 import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
 import { cn } from '@comfyorg/tailwind-utils'
 import { renameWidget } from '@/utils/widgetUtil'
@@ -68,6 +68,11 @@ const widgetComponent = computed(() => {
   return component || WidgetLegacy
 })
 
+function resolveSourceWidget(): { node: LGraphNode; widget: IBaseWidget } {
+  const source = resolvePromotedWidgetSource(node, widget)
+  return source ?? { node, widget }
+}
+
 const isLinked = computed(() => {
   const safeWidget = useVueNodeLifecycle()
     .nodeManager.value?.vueNodeData.get(String(node.id))
@@ -78,33 +83,31 @@ const isLinked = computed(() => {
 })
 
 const simplifiedWidget = computed((): SimplifiedWidget => {
+  const { node: sourceNode, widget: sourceWidget } = resolveSourceWidget()
   const graphId = node.graph?.rootGraph?.id
-  const bareNodeId = stripGraphPrefix(String(node.id))
-  const widgetState = widget.widgetId
-    ? useWidgetValueStore().getWidget(widget.widgetId)
-    : graphId
-      ? widgetValueStore.getWidget(widgetId(graphId, bareNodeId, widget.name))
-      : undefined
-  const widgetName = widgetState?.name ?? widget.name
-  const widgetType = widgetState?.type ?? widget.type
+  const bareNodeId = stripGraphPrefix(String(sourceNode.id))
+  const widgetState = graphId
+    ? widgetValueStore.getWidget(graphId, bareNodeId, sourceWidget.name)
+    : undefined
 
   const baseOptions = widgetState?.options ?? widget.options
   const disabled = isLinked.value || !!widget.disabled || undefined
   return {
-    name: widgetName,
-    type: widgetType,
+    name: widget.name,
+    type: widget.type,
     value: widgetState?.value ?? widget.value,
     label: widgetState?.label ?? widget.label,
     options: { ...baseOptions, disabled },
-    spec: nodeDefStore.getInputSpecForWidget(node, widgetName),
-    controlWidget: getControlWidget(widget)
+    spec: nodeDefStore.getInputSpecForWidget(sourceNode, sourceWidget.name),
+    controlWidget: getControlWidget(sourceWidget)
   }
 })
 
-const displayNodeName = computed((): string | null => {
-  if (!node) return null
+const sourceNodeName = computed((): string | null => {
+  const sourceNode = resolvePromotedWidgetSource(node, widget)?.node ?? node
+  if (!sourceNode) return null
   const fallbackNodeTitle = t('rightSidePanel.fallbackNodeTitle')
-  return resolveNodeDisplayName(node, {
+  return resolveNodeDisplayName(sourceNode, {
     emptyLabel: fallbackNodeTitle,
     untitledLabel: fallbackNodeTitle,
     st
@@ -176,10 +179,10 @@ const displayLabel = customRef((track, trigger) => {
       />
 
       <span
-        v-if="(showNodeName || hasParents) && displayNodeName"
+        v-if="(showNodeName || hasParents) && sourceNodeName"
         class="mx-1 my-0 min-w-10 flex-1 truncate p-0 text-right text-xs text-muted-foreground"
       >
-        {{ displayNodeName }}
+        {{ sourceNodeName }}
       </span>
       <div
         v-if="!hiddenWidgetActions"

src/components/rightSidePanel/subgraph/SubgraphEditor.test.ts

@@ -14,9 +14,8 @@ import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { usePreviewExposureStore } from '@/stores/previewExposureStore'
 
-import { promotedInputWidget } from '@/core/graph/subgraph/promotedInputWidget'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { promoteValueWidgetViaSubgraphInput } from '@/core/graph/subgraph/promotionUtils'
-import { resolveSubgraphInputTarget } from '@/core/graph/subgraph/resolveSubgraphInputTarget'
 import SubgraphEditor from './SubgraphEditor.vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
 import type DraggableList from '@/components/common/DraggableList.vue'
@@ -168,20 +167,11 @@ describe('SubgraphEditor', () => {
         .map((el) => el.textContent?.trim())
     ).toEqual(['first', 'second'])
 
-    const rowFor = (sourceNode: LGraphNode) => {
-      const input = host.inputs.find((input) => {
-        if (!input.widgetId) return false
-        const target = resolveSubgraphInputTarget(host, input.name)
-        return target?.nodeId === String(sourceNode.id)
-      })!
-      return {
-        kind: 'promoted',
-        node: sourceNode,
-        input,
-        widget: promotedInputWidget(input)!
-      }
-    }
-    const reversed = [rowFor(secondNode), rowFor(firstNode)] as PromotedRow[]
+    const promotedWidgets = host.widgets.filter(isPromotedWidgetView)
+    const reversed = [
+      { kind: 'promoted', node: secondNode, widget: promotedWidgets[1] },
+      { kind: 'promoted', node: firstNode, widget: promotedWidgets[0] }
+    ] as PromotedRow[]
     listSetter?.(reversed)
     await nextTick()
 
@@ -192,42 +182,6 @@ describe('SubgraphEditor', () => {
     ).toEqual(['second', 'first'])
   })
 
-  it('moves a widget to shown when promoted from the hidden section', async () => {
-    const subgraph = createTestSubgraph()
-    const host = createTestSubgraphNode(subgraph)
-    const sourceNode = new LGraphNode('SourceNode')
-    subgraph.add(sourceNode)
-
-    const sourceInput = sourceNode.addInput('first', 'STRING')
-    const sourceWidget = sourceNode.addWidget('text', 'first', '', () => {})
-    sourceInput.widget = { name: sourceWidget.name }
-    useCanvasStore().selectedItems = [host]
-
-    render(SubgraphEditor, {
-      container: document.body.appendChild(document.createElement('div')),
-      global: {
-        plugins: [i18n],
-        stubs: {
-          DraggableList: {
-            template:
-              '<div data-testid="draggable-list"><slot drag-class="draggable-item" /></div>'
-          }
-        }
-      }
-    })
-
-    const hidden = screen.getByTestId('subgraph-editor-hidden-section')
-    await userEvent.click(within(hidden).getByTestId('subgraph-widget-toggle'))
-    await nextTick()
-
-    const shown = screen.getByTestId('subgraph-editor-shown-section')
-    expect(
-      within(shown)
-        .getAllByTestId('subgraph-widget-label')
-        .map((el) => el.textContent?.trim())
-    ).toEqual(['first'])
-  })
-
   it('demotes linked promoted widgets when "Hide all" is clicked', async () => {
     const subgraph = createTestSubgraph()
     const host = createTestSubgraphNode(subgraph)
@@ -259,13 +213,13 @@ describe('SubgraphEditor', () => {
       }
     })
 
-    expect(host.inputs.filter((input) => input.widgetId)).toHaveLength(2)
+    expect(host.widgets.filter(isPromotedWidgetView)).toHaveLength(2)
 
     const shown = screen.getByTestId('subgraph-editor-shown-section')
     const hideAllLink = within(shown).getByText('Hide all')
     await userEvent.click(hideAllLink)
 
-    expect(host.inputs.filter((input) => input.widgetId)).toHaveLength(0)
+    expect(host.widgets.filter(isPromotedWidgetView)).toHaveLength(0)
   })
 
   it('removes the exposure when a preview row without a real source widget is demoted', async () => {

src/components/rightSidePanel/subgraph/SubgraphEditor.vue

@@ -5,8 +5,9 @@ import { computed, onMounted, shallowRef, watch } from 'vue'
 
 import DraggableList from '@/components/common/DraggableList.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+import type { PromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import {
-  demotePromotedInput,
   demoteWidget,
   getPromotableWidgets,
   isLinkedPromotion,
@@ -15,14 +16,8 @@ import {
   pruneDisconnected,
   reorderSubgraphInputsByWidgetOrder
 } from '@/core/graph/subgraph/promotionUtils'
-import {
-  promotedInputSource,
-  promotedInputWidget
-} from '@/core/graph/subgraph/promotedInputWidget'
-import type { PromotedSource } from '@/core/graph/subgraph/promotedInputWidget'
 import type { WidgetItem } from '@/core/graph/subgraph/promotionUtils'
 import type { PreviewExposure } from '@/core/schemas/previewExposureSchema'
-import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
@@ -38,8 +33,7 @@ import SubgraphNodeWidget from './SubgraphNodeWidget.vue'
 type PromotedRow = {
   kind: 'promoted'
   node: LGraphNode
-  input: INodeInputSlot
-  widget: IBaseWidget
+  widget: PromotedWidgetView
 }
 type PreviewRow = {
   kind: 'preview'
@@ -60,23 +54,11 @@ const activeNode = computed(() => {
   return undefined
 })
 
-const promotedRows = shallowRef<readonly PromotedRow[]>([])
-function buildPromotedRows(node: SubgraphNode): PromotedRow[] {
-  return node.inputs.flatMap((input): PromotedRow[] => {
-    const widget = promotedInputWidget(input)
-    if (!widget) return []
-    const source = promotedInputSource(node, input)
-    if (!source) return []
-    const sourceNode = node.subgraph._nodes_by_id[source.nodeId]
-    if (!sourceNode) return []
-    return [{ kind: 'promoted', node: sourceNode, input, widget }]
-  })
+const promotedWidgets = shallowRef<readonly IBaseWidget[]>([])
+function refreshPromotedWidgets() {
+  promotedWidgets.value = activeNode.value?.widgets ?? []
 }
-function refreshPromotedRows() {
-  const node = activeNode.value
-  promotedRows.value = node ? buildPromotedRows(node) : []
-}
-watch(activeNode, refreshPromotedRows, { immediate: true })
+watch(activeNode, refreshPromotedWidgets, { immediate: true })
 useEventListener(
   () => activeNode.value?.subgraph.events,
   [
@@ -86,29 +68,34 @@ useEventListener(
     'removing-input',
     'inputs-reordered'
   ],
-  refreshPromotedRows
+  refreshPromotedWidgets
 )
 
-function promotedRowSource(row: PromotedRow): PromotedSource | undefined {
-  const node = activeNode.value
-  return node ? promotedInputSource(node, row.input) : undefined
-}
-
 const activeRows = computed<ActiveRow[]>(() => {
   const node = activeNode.value
   if (!node) return []
-  return [...promotedRows.value, ...getActivePreviewRows(node)]
+  return [...getActivePromotedRows(node), ...getActivePreviewRows(node)]
 })
 
 const activePromotedRows = computed<PromotedRow[]>({
   get() {
-    return [...promotedRows.value]
+    const node = activeNode.value
+    return node ? getActivePromotedRows(node) : []
   },
   set(value: PromotedRow[]) {
     updateActivePromotedRows(value, activePromotedRows.value)
   }
 })
 
+function getActivePromotedRows(node: SubgraphNode): PromotedRow[] {
+  return promotedWidgets.value.flatMap((widget): PromotedRow[] => {
+    if (!isPromotedWidgetView(widget)) return []
+    const sourceNode = node.subgraph._nodes_by_id[widget.sourceNodeId]
+    if (!sourceNode) return []
+    return [{ kind: 'promoted', node: sourceNode, widget }]
+  })
+}
+
 function getActivePreviewRows(node: SubgraphNode): PreviewRow[] {
   const hostLocator = String(node.id)
   const rootGraphId = node.rootGraph.id
@@ -143,7 +130,7 @@ function updateActivePromotedRows(
   if (currentKeys.size === nextKeys.size) {
     reorderSubgraphInputsByWidgetOrder(
       node,
-      value.map((row) => ({ widgetId: row.widget.widgetId }))
+      value.map((row) => row.widget)
     )
   }
   refreshPromotedWidgetRendering()
@@ -164,11 +151,9 @@ const interiorWidgets = computed<WidgetItem[]>(() => {
 })
 
 function activeRowSourceKey(row: ActiveRow): string {
-  if (row.kind !== 'promoted')
-    return `${row.exposure.sourceNodeId}:${row.exposure.sourcePreviewName}`
-
-  const source = promotedRowSource(row)
-  return `${source?.nodeId ?? row.node.id}:${source?.widgetName ?? ''}`
+  return row.kind === 'promoted'
+    ? `${row.widget.sourceNodeId}:${row.widget.sourceWidgetName}`
+    : `${row.exposure.sourceNodeId}:${row.exposure.sourcePreviewName}`
 }
 
 const candidateWidgets = computed<WidgetItem[]>(() => {
@@ -243,16 +228,18 @@ function rowDisplayName(row: ActiveRow): string {
 function isRowLinked(row: ActiveRow): boolean {
   if (row.kind !== 'promoted') return false
   if (row.node.id === -1) return true
-  const source = promotedRowSource(row)
   return (
     !!activeNode.value &&
-    !!source &&
-    isLinkedPromotion(activeNode.value, String(row.node.id), source.widgetName)
+    isLinkedPromotion(
+      activeNode.value,
+      String(row.node.id),
+      row.widget.sourceWidgetName
+    )
   )
 }
 
 function promotedRowKey(row: PromotedRow): string {
-  return `${row.node.id}: ${row.widget.name}`
+  return `${row.node.id}: ${row.widget.name}:${row.widget.sourceNodeId}`
 }
 
 function rowKey(row: ActiveRow): string {
@@ -269,14 +256,7 @@ function demoteRow(row: ActiveRow) {
   const subgraphNode = activeNode.value
   if (!subgraphNode) return
   if (row.kind === 'promoted') {
-    const source = promotedRowSource(row)
-    if (source) {
-      demotePromotedInput(subgraphNode, {
-        sourceNodeId: source.nodeId,
-        sourceWidgetName: source.widgetName
-      })
-    }
-    refreshPromotedWidgetRendering()
+    demoteWidget(row.node, row.widget, [subgraphNode])
     return
   }
   if (row.realWidget) {
@@ -294,18 +274,13 @@ function demoteRow(row: ActiveRow) {
 function promotePromotedRow(row: PromotedRow) {
   const subgraphNode = activeNode.value
   if (!subgraphNode) return
-  const source = promotedRowSource(row)
-  const sourceWidget = source
-    ? row.node.widgets?.find((widget) => widget.name === source.widgetName)
-    : undefined
-  if (sourceWidget) promoteWidget(row.node, sourceWidget, [subgraphNode])
+  promoteWidget(row.node, row.widget, [subgraphNode])
 }
 
 function promoteCandidate([node, widget]: WidgetItem) {
   const subgraphNode = activeNode.value
   if (!subgraphNode) return
   promoteWidget(node, widget, [subgraphNode])
-  refreshPromotedRows()
 }
 
 function showAll() {

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -586,9 +586,7 @@ const handleZoomClick = (asset: AssetItem) => {
         modelUrl: asset.preview_url || getAssetUrl(asset)
       },
       dialogComponentProps: {
-        renderer: 'reka',
-        size: 'full',
-        contentClass: 'w-[80vw] h-[80vh] max-h-[80vh]',
+        style: 'width: 80vw; height: 80vh;',
         maximizable: true
       }
     })

src/components/sidebar/tabs/JobHistorySidebarTab.vue

@@ -189,9 +189,7 @@ const onViewItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
         modelUrl: previewOutput.url || ''
       },
       dialogComponentProps: {
-        renderer: 'reka',
-        size: 'full',
-        contentClass: 'w-[80vw] h-[80vh] max-h-[80vh]',
+        style: 'width: 80vw; height: 80vh;',
         maximizable: true
       }
     })

src/components/ui/dialog/DialogContent.vue

@@ -28,15 +28,7 @@ const forwarded = useForwardPropsEmits(restProps, emits)
 <template>
   <DialogContent
     v-bind="forwarded"
-    :class="
-      cn(
-        dialogContentVariants({ size, maximized }),
-        customClass,
-        // Custom dimension classes must yield to maximize, mirroring the
-        // PrimeVue `.p-dialog-maximized` !important behavior.
-        maximized && 'size-auto max-h-none max-w-none sm:max-w-none'
-      )
-    "
+    :class="cn(dialogContentVariants({ size, maximized }), customClass)"
   >
     <slot />
   </DialogContent>

src/components/ui/tooltip/BaseTooltip.stories.ts

@@ -1,189 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { TooltipProvider } from 'reka-ui'
-
-import BaseTooltip from './BaseTooltip.vue'
-import { FOR_STORIES } from './tooltip.variants'
-
-const { sizes, sides } = FOR_STORIES
-
-const meta: Meta<typeof BaseTooltip> = {
-  title: 'Components/Tooltip/BaseTooltip',
-  component: BaseTooltip,
-  tags: ['autodocs'],
-  decorators: [
-    (story) => ({
-      components: { TooltipProvider, story },
-      template:
-        '<TooltipProvider :delay-duration="0"><div class="flex items-center justify-center p-20"><story /></div></TooltipProvider>'
-    })
-  ],
-  argTypes: {
-    size: {
-      control: { type: 'select' },
-      options: sizes
-    },
-    side: {
-      control: { type: 'select' },
-      options: sides
-    },
-    text: { control: 'text' },
-    keybind: { control: 'text' },
-    showIcon: { control: 'boolean' },
-    disabled: { control: 'boolean' }
-  },
-  args: {
-    size: 'small',
-    side: 'top',
-    text: 'Tooltip text',
-    disabled: false
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Small: Story = {
-  render: (args) => ({
-    components: { BaseTooltip },
-    setup: () => ({ args }),
-    template: `
-      <BaseTooltip v-bind="args">
-        <button class="rounded-lg bg-secondary-background px-4 py-2 text-sm">
-          Hover me
-        </button>
-      </BaseTooltip>`
-  })
-}
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    text: 'This is a longer tooltip that can wrap to multiple lines for detailed descriptions of node functionality.'
-  },
-  render: (args) => ({
-    components: { BaseTooltip },
-    setup: () => ({ args }),
-    template: `
-      <BaseTooltip v-bind="args">
-        <button class="rounded-lg bg-secondary-background px-4 py-2 text-sm">
-          Hover me
-        </button>
-      </BaseTooltip>`
-  })
-}
-
-export const WithKeybind: Story = {
-  args: {
-    text: 'Undo',
-    keybind: 'Ctrl+Z'
-  },
-  render: (args) => ({
-    components: { BaseTooltip },
-    setup: () => ({ args }),
-    template: `
-      <BaseTooltip v-bind="args">
-        <button class="rounded-lg bg-secondary-background px-4 py-2 text-sm">
-          Hover me
-        </button>
-      </BaseTooltip>`
-  })
-}
-
-export const WithIcon: Story = {
-  args: {
-    text: 'More options',
-    showIcon: true,
-    size: 'small'
-  },
-  render: (args) => ({
-    components: { BaseTooltip },
-    setup: () => ({ args }),
-    template: `
-      <BaseTooltip v-bind="args">
-        <button class="rounded-lg bg-secondary-background px-4 py-2 text-sm">
-          Hover me
-        </button>
-      </BaseTooltip>`
-  })
-}
-
-export const WithKeybindAndIcon: Story = {
-  args: {
-    text: 'Save',
-    keybind: 'Ctrl+S',
-    showIcon: true,
-    size: 'small'
-  },
-  render: (args) => ({
-    components: { BaseTooltip },
-    setup: () => ({ args }),
-    template: `
-      <BaseTooltip v-bind="args">
-        <button class="rounded-lg bg-secondary-background px-4 py-2 text-sm">
-          Hover me
-        </button>
-      </BaseTooltip>`
-  })
-}
-
-export const Disabled: Story = {
-  args: {
-    text: 'This tooltip is disabled',
-    disabled: true
-  },
-  render: (args) => ({
-    components: { BaseTooltip },
-    setup: () => ({ args }),
-    template: `
-      <BaseTooltip v-bind="args">
-        <button class="rounded-lg bg-secondary-background px-4 py-2 text-sm">
-          Hover me (disabled tooltip)
-        </button>
-      </BaseTooltip>`
-  })
-}
-
-export const AllSides: Story = {
-  render: () => ({
-    components: { BaseTooltip },
-    template: `
-      <div class="grid grid-cols-2 gap-12">
-        ${sides
-          .map(
-            (side) => `
-          <BaseTooltip text="${side} tooltip" side="${side}" size="small">
-            <button class="w-full rounded-lg bg-secondary-background px-4 py-2 text-sm">
-              ${side}
-            </button>
-          </BaseTooltip>`
-          )
-          .join('\n')}
-      </div>`
-  })
-}
-
-export const AllVariants: Story = {
-  render: () => ({
-    components: { BaseTooltip },
-    template: `
-      <div class="flex flex-col gap-12">
-        <div class="flex flex-wrap items-center gap-8">
-          <BaseTooltip text="Small tooltip" size="small" side="bottom">
-            <button class="rounded-lg bg-secondary-background px-4 py-2 text-sm">Small</button>
-          </BaseTooltip>
-          <BaseTooltip text="This is a large tooltip with longer text that wraps across multiple lines." size="large" side="bottom">
-            <button class="rounded-lg bg-secondary-background px-4 py-2 text-sm">Large</button>
-          </BaseTooltip>
-          <BaseTooltip text="Undo" keybind="Ctrl+Z" size="small" side="bottom">
-            <button class="rounded-lg bg-secondary-background px-4 py-2 text-sm">With Keybind</button>
-          </BaseTooltip>
-          <BaseTooltip text="More options" :show-icon="true" size="small" side="bottom">
-            <button class="rounded-lg bg-secondary-background px-4 py-2 text-sm">With Icon</button>
-          </BaseTooltip>
-          <BaseTooltip text="Save" keybind="Ctrl+S" :show-icon="true" size="small" side="bottom">
-            <button class="rounded-lg bg-secondary-background px-4 py-2 text-sm">All Features</button>
-          </BaseTooltip>
-        </div>
-      </div>`
-  })
-}

src/components/ui/tooltip/BaseTooltip.vue

@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import {
-  TooltipArrow,
-  TooltipContent,
-  TooltipPortal,
-  TooltipRoot,
-  TooltipTrigger
-} from 'reka-ui'
-
-import type { TooltipVariants } from '@/components/ui/tooltip/tooltip.variants'
-import { tooltipVariants } from '@/components/ui/tooltip/tooltip.variants'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const {
-  text = '',
-  side = 'top',
-  sideOffset = 4,
-  size = 'small',
-  keybind,
-  showIcon = false,
-  delayDuration,
-  disabled = false,
-  class: className
-} = defineProps<{
-  text?: string
-  side?: 'top' | 'bottom' | 'left' | 'right'
-  sideOffset?: number
-  size?: NonNullable<TooltipVariants['size']>
-  keybind?: string
-  showIcon?: boolean
-  delayDuration?: number
-  disabled?: boolean
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <TooltipRoot :delay-duration="delayDuration" :disabled="disabled || !text">
-    <TooltipTrigger as-child>
-      <slot />
-    </TooltipTrigger>
-    <TooltipPortal>
-      <TooltipContent
-        :side="side"
-        :side-offset="sideOffset"
-        :class="cn(tooltipVariants({ size }), className)"
-      >
-        <span
-          v-if="keybind || (showIcon && size === 'small')"
-          class="inline-flex items-center gap-2"
-        >
-          <span>{{ text }}</span>
-          <i
-            v-if="showIcon && size === 'small'"
-            class="icon-[lucide--chevron-right] size-4 shrink-0"
-          />
-          <span
-            v-if="keybind"
-            class="shrink-0 rounded-sm bg-interface-menu-keybind-surface-default px-1 text-xs leading-none"
-          >
-            {{ keybind }}
-          </span>
-        </span>
-        <template v-else>{{ text }}</template>
-        <TooltipArrow
-          :width="8"
-          :height="5"
-          class="fill-node-component-tooltip-surface stroke-node-component-tooltip-border"
-        />
-      </TooltipContent>
-    </TooltipPortal>
-  </TooltipRoot>
-</template>

src/components/ui/tooltip/tooltip.variants.ts

@@ -1,24 +0,0 @@
-import type { VariantProps } from 'cva'
-import { cva } from 'cva'
-
-export const tooltipVariants = cva({
-  base: 'z-[1700] select-none border border-node-component-tooltip-border bg-node-component-tooltip-surface px-4 py-2 text-node-component-tooltip shadow-interface',
-  variants: {
-    size: {
-      small: 'rounded-lg text-xs leading-none',
-      large: 'max-w-75 rounded-sm text-sm/tight font-normal'
-    }
-  },
-  defaultVariants: {
-    size: 'small'
-  }
-})
-
-export type TooltipVariants = VariantProps<typeof tooltipVariants>
-
-const sizes = ['small', 'large'] as const satisfies Array<
-  TooltipVariants['size']
->
-const sides = ['top', 'bottom', 'left', 'right'] as const
-
-export const FOR_STORIES = { sizes, sides } as const

src/composables/boundingBoxes/boundingBoxesUtil.test.ts

@@ -0,0 +1,237 @@
+import { describe, expect, it } from 'vitest'
+
+import type { BoundingBox } from '@/types/boundingBoxes'
+
+import type { HitMode, Region } from './boundingBoxesUtil'
+import {
+  applyDrag,
+  boxesAt,
+  fromBoundingBoxes,
+  tagRects,
+  toBoundingBoxes
+} from './boundingBoxesUtil'
+
+const region = (over: Partial<Region> = {}): Region => ({
+  x: 0.2,
+  y: 0.2,
+  w: 0.2,
+  h: 0.2,
+  type: 'obj',
+  text: '',
+  desc: '',
+  palette: [],
+  ...over
+})
+
+describe('applyDrag', () => {
+  it('moves without resizing and keeps width/height', () => {
+    const out = applyDrag('move', region({ x: 0.2, y: 0.2 }), 0.1, 0.1)
+    expect(out.x).toBeCloseTo(0.3)
+    expect(out.y).toBeCloseTo(0.3)
+    expect(out.w).toBeCloseTo(0.2)
+    expect(out.h).toBeCloseTo(0.2)
+  })
+
+  it('clamps a move so the box stays inside the unit square', () => {
+    const out = applyDrag(
+      'move',
+      region({ x: 0.9, y: 0.9, w: 0.2, h: 0.2 }),
+      0.5,
+      0.5
+    )
+    expect(out.x).toBeCloseTo(0.8)
+    expect(out.y).toBeCloseTo(0.8)
+  })
+
+  it('grows from the bottom-right for draw and resize-br', () => {
+    for (const mode of ['draw', 'resize-br'] as HitMode[]) {
+      const out = applyDrag(
+        mode,
+        region({ x: 0.2, y: 0.2, w: 0.1, h: 0.1 }),
+        0.1,
+        0.2
+      )
+      expect(out).toMatchObject({ x: 0.2, y: 0.2 })
+      expect(out.w).toBeCloseTo(0.2)
+      expect(out.h).toBeCloseTo(0.3)
+    }
+  })
+
+  it('moves the top-left corner on resize-tl', () => {
+    const out = applyDrag(
+      'resize-tl',
+      region({ x: 0.5, y: 0.5, w: 0.2, h: 0.2 }),
+      0.1,
+      0.1
+    )
+    expect(out.x).toBeCloseTo(0.6)
+    expect(out.y).toBeCloseTo(0.6)
+    expect(out.w).toBeCloseTo(0.1)
+    expect(out.h).toBeCloseTo(0.1)
+  })
+
+  it('normalizes a corner drag that inverts the box', () => {
+    const out = applyDrag(
+      'resize-tl',
+      region({ x: 0.5, y: 0.5, w: 0.2, h: 0.2 }),
+      0.3,
+      0
+    )
+    expect(out.x).toBeCloseTo(0.7)
+    expect(out.w).toBeCloseTo(0.1)
+    expect(out.y).toBeCloseTo(0.5)
+    expect(out.h).toBeCloseTo(0.2)
+  })
+
+  it('resizes single edges', () => {
+    expect(applyDrag('resize-r', region({ w: 0.2 }), 0.1, 0).w).toBeCloseTo(0.3)
+    expect(applyDrag('resize-b', region({ h: 0.2 }), 0, 0.1).h).toBeCloseTo(0.3)
+    const top = applyDrag('resize-t', region({ y: 0.4, h: 0.2 }), 0, 0.1)
+    expect(top.y).toBeCloseTo(0.5)
+    expect(top.h).toBeCloseTo(0.1)
+    const left = applyDrag('resize-l', region({ x: 0.4, w: 0.2 }), 0.1, 0)
+    expect(left.x).toBeCloseTo(0.5)
+    expect(left.w).toBeCloseTo(0.1)
+  })
+})
+
+describe('boxesAt', () => {
+  const regions: Region[] = [region({ x: 0.2, y: 0.2, w: 0.2, h: 0.2 })]
+
+  it('detects a corner handle', () => {
+    const hits = boxesAt(regions, 0.2, 0.2, 6, 100, 100, -1)
+    expect(hits[0]).toEqual({ index: 0, mode: 'resize-tl' })
+  })
+
+  it('detects an interior move', () => {
+    const hits = boxesAt(regions, 0.3, 0.3, 6, 100, 100, -1)
+    expect(hits[0]).toEqual({ index: 0, mode: 'move' })
+  })
+
+  it('returns nothing when the pointer misses every box', () => {
+    expect(boxesAt(regions, 0.9, 0.9, 6, 100, 100, -1)).toEqual([])
+  })
+
+  it('brings the active box to the front of overlapping candidates', () => {
+    const overlapping: Region[] = [
+      region({ x: 0.2, y: 0.2, w: 0.2, h: 0.2 }),
+      region({ x: 0.25, y: 0.25, w: 0.2, h: 0.2 })
+    ]
+    const hits = boxesAt(overlapping, 0.3, 0.3, 6, 100, 100, 1)
+    expect(hits).toHaveLength(2)
+    expect(hits[0].index).toBe(1)
+  })
+})
+
+describe('tagRects', () => {
+  const measure = (s: string) => s.length * 7
+
+  it('places the first tag at the top-left corner', () => {
+    const rects = tagRects(
+      [region({ x: 0.1, y: 0.1, w: 0.3, h: 0.3 })],
+      100,
+      100,
+      measure
+    )
+    expect(rects[0]).toMatchObject({ x: 10, y: 10, tag: '01' })
+    expect(rects[0].w).toBe(measure('01') + 8)
+  })
+
+  it('moves a colliding tag to a different corner', () => {
+    const boxes = [
+      region({ x: 0.1, y: 0.1, w: 0.3, h: 0.3 }),
+      region({ x: 0.1, y: 0.1, w: 0.3, h: 0.3 })
+    ]
+    const rects = tagRects(boxes, 100, 100, measure)
+    const sameSpot = rects[1].x === rects[0].x && rects[1].y === rects[0].y
+    expect(sameSpot).toBe(false)
+  })
+})
+
+describe('fromBoundingBoxes', () => {
+  it('converts pixel boxes to normalized regions with metadata', () => {
+    const boxes: BoundingBox[] = [
+      {
+        x: 100,
+        y: 200,
+        width: 300,
+        height: 400,
+        metadata: { type: 'text', text: 'hi', desc: 'd', palette: ['#fff'] }
+      }
+    ]
+    expect(fromBoundingBoxes(boxes, 1000, 1000)[0]).toEqual({
+      x: 0.1,
+      y: 0.2,
+      w: 0.3,
+      h: 0.4,
+      type: 'text',
+      text: 'hi',
+      desc: 'd',
+      palette: ['#fff']
+    })
+  })
+
+  it('fills defaults when metadata is missing or partial', () => {
+    const boxes = [{ x: 0, y: 0, width: 10, height: 10 }] as BoundingBox[]
+    expect(fromBoundingBoxes(boxes, 100, 100)[0]).toMatchObject({
+      type: 'obj',
+      text: '',
+      desc: '',
+      palette: []
+    })
+  })
+
+  it('drops entries that are not bounding boxes', () => {
+    const boxes = [null, { x: 1 }, undefined] as unknown as BoundingBox[]
+    expect(fromBoundingBoxes(boxes, 100, 100)).toEqual([])
+  })
+
+  it('guards against zero dimensions', () => {
+    const boxes: BoundingBox[] = [
+      {
+        x: 5,
+        y: 5,
+        width: 5,
+        height: 5,
+        metadata: { type: 'obj', text: '', desc: '', palette: [] }
+      }
+    ]
+    expect(fromBoundingBoxes(boxes, 0, 0)[0]).toMatchObject({
+      x: 5,
+      y: 5,
+      w: 5,
+      h: 5
+    })
+  })
+})
+
+describe('toBoundingBoxes', () => {
+  it('rounds normalized regions back to pixels and copies the palette', () => {
+    const palette = ['#abc']
+    const regions: Region[] = [
+      region({ x: 0.1, y: 0.2, w: 0.3, h: 0.4, palette })
+    ]
+    const [box] = toBoundingBoxes(regions, 1000, 1000)
+    expect(box).toMatchObject({ x: 100, y: 200, width: 300, height: 400 })
+    expect(box.metadata.palette).toEqual(['#abc'])
+    expect(box.metadata.palette).not.toBe(palette)
+  })
+
+  it('round-trips from pixels to regions and back', () => {
+    const boxes: BoundingBox[] = [
+      {
+        x: 100,
+        y: 200,
+        width: 300,
+        height: 400,
+        metadata: { type: 'obj', text: '', desc: '', palette: [] }
+      }
+    ]
+    const restored = toBoundingBoxes(
+      fromBoundingBoxes(boxes, 1000, 1000),
+      1000,
+      1000
+    )
+    expect(restored).toEqual(boxes)
+  })
+})

src/composables/boundingBoxes/boundingBoxesUtil.ts

@@ -0,0 +1,246 @@
+import type { BoundingBox, BoundingBoxMetadata } from '@/types/boundingBoxes'
+
+export type HitMode =
+  | 'move'
+  | 'draw'
+  | 'resize-tl'
+  | 'resize-tr'
+  | 'resize-bl'
+  | 'resize-br'
+  | 'resize-t'
+  | 'resize-b'
+  | 'resize-l'
+  | 'resize-r'
+
+export interface Region extends BoundingBoxMetadata {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+interface BoxCandidate {
+  index: number
+  mode: HitMode
+}
+
+interface TagRect {
+  x: number
+  y: number
+  w: number
+  h: number
+  tag: string
+}
+
+const clamp01 = (v: number) => Math.max(0, Math.min(1, v))
+
+function normalizeBox(b: Region): Region {
+  let { x, y, w, h } = b
+  if (w < 0) {
+    x += w
+    w = -w
+  }
+  if (h < 0) {
+    y += h
+    h = -h
+  }
+  x = clamp01(x)
+  y = clamp01(y)
+  w = Math.min(w, 1 - x)
+  h = Math.min(h, 1 - y)
+  return { ...b, x, y, w: Math.max(0, w), h: Math.max(0, h) }
+}
+
+function rectHitTest(
+  mx: number,
+  my: number,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  rx: number,
+  ry: number
+): HitMode | null {
+  const h = (cx: number, cy: number) =>
+    Math.abs(mx - cx) < rx && Math.abs(my - cy) < ry
+  if (h(x1, y1)) return 'resize-tl'
+  if (h(x2, y1)) return 'resize-tr'
+  if (h(x1, y2)) return 'resize-bl'
+  if (h(x2, y2)) return 'resize-br'
+  if (mx >= x1 && mx <= x2 && Math.abs(my - y1) < ry) return 'resize-t'
+  if (mx >= x1 && mx <= x2 && Math.abs(my - y2) < ry) return 'resize-b'
+  if (my >= y1 && my <= y2 && Math.abs(mx - x1) < rx) return 'resize-l'
+  if (my >= y1 && my <= y2 && Math.abs(mx - x2) < rx) return 'resize-r'
+  if (mx >= x1 && mx <= x2 && my >= y1 && my <= y2) return 'move'
+  return null
+}
+
+export function applyDrag(
+  mode: HitMode,
+  start: Region,
+  dx: number,
+  dy: number
+): Region {
+  let { x, y, w, h } = start
+  switch (mode) {
+    case 'move':
+      x += dx
+      y += dy
+      x = clamp01(Math.min(x, 1 - w))
+      y = clamp01(Math.min(y, 1 - h))
+      break
+    case 'draw':
+    case 'resize-br':
+      w += dx
+      h += dy
+      break
+    case 'resize-tl':
+      x += dx
+      y += dy
+      w -= dx
+      h -= dy
+      break
+    case 'resize-tr':
+      y += dy
+      w += dx
+      h -= dy
+      break
+    case 'resize-bl':
+      x += dx
+      w -= dx
+      h += dy
+      break
+    case 'resize-t':
+      y += dy
+      h -= dy
+      break
+    case 'resize-b':
+      h += dy
+      break
+    case 'resize-l':
+      x += dx
+      w -= dx
+      break
+    case 'resize-r':
+      w += dx
+      break
+  }
+  return mode === 'move'
+    ? { ...start, x, y }
+    : normalizeBox({ ...start, x, y, w, h })
+}
+
+export function boxesAt(
+  regions: readonly Region[],
+  mxN: number,
+  myN: number,
+  handlePx: number,
+  logW: number,
+  logH: number,
+  activeIdx: number
+): BoxCandidate[] {
+  const rx = handlePx / Math.max(1, logW)
+  const ry = handlePx / Math.max(1, logH)
+  const res: BoxCandidate[] = []
+  for (let i = 0; i < regions.length; i++) {
+    const b = regions[i]
+    const mode = rectHitTest(mxN, myN, b.x, b.y, b.x + b.w, b.y + b.h, rx, ry)
+    if (mode) res.push({ index: i, mode })
+  }
+  const ai = res.findIndex((c) => c.index === activeIdx)
+  if (ai > 0) res.unshift(res.splice(ai, 1)[0])
+  return res
+}
+
+export function tagRects(
+  regions: readonly Region[],
+  logW: number,
+  logH: number,
+  measureWidth: (s: string) => number,
+  height = 14
+): TagRect[] {
+  const placed: TagRect[] = []
+  const rects: TagRect[] = []
+  const hits = (a: TagRect, b: TagRect) =>
+    a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y
+  for (let i = 0; i < regions.length; i++) {
+    const b = regions[i]
+    const x1 = b.x * logW
+    const y1 = b.y * logH
+    const x2 = (b.x + b.w) * logW
+    const y2 = (b.y + b.h) * logH
+    const tag = String(i + 1).padStart(2, '0')
+    const w = measureWidth(tag) + 8
+    let pick: [number, number] = [x1, y1]
+    for (const [cx, cy] of [
+      [x1, y1],
+      [x2 - w, y1],
+      [x2 - w, y2 - height],
+      [x1, y2 - height]
+    ] as const) {
+      const candidate: TagRect = { x: cx, y: cy, w, h: height, tag }
+      if (!placed.some((p) => hits(candidate, p))) {
+        pick = [cx, cy]
+        break
+      }
+    }
+    const r: TagRect = { x: pick[0], y: pick[1], w, h: height, tag }
+    placed.push(r)
+    rects[i] = r
+  }
+  return rects
+}
+
+function isBoundingBox(b: unknown): b is BoundingBox {
+  if (!b || typeof b !== 'object') return false
+  const box = b as Record<string, unknown>
+  return (
+    typeof box.x === 'number' &&
+    typeof box.y === 'number' &&
+    typeof box.width === 'number' &&
+    typeof box.height === 'number'
+  )
+}
+
+export function fromBoundingBoxes(
+  boxes: readonly BoundingBox[],
+  width: number,
+  height: number
+): Region[] {
+  const w = width || 1
+  const h = height || 1
+  return boxes.filter(isBoundingBox).map((box) => {
+    const meta = (box.metadata ?? {}) as Partial<BoundingBoxMetadata>
+    return {
+      x: box.x / w,
+      y: box.y / h,
+      w: box.width / w,
+      h: box.height / h,
+      type: meta.type === 'text' ? 'text' : 'obj',
+      text: typeof meta.text === 'string' ? meta.text : '',
+      desc: typeof meta.desc === 'string' ? meta.desc : '',
+      palette: Array.isArray(meta.palette)
+        ? meta.palette.filter((c): c is string => typeof c === 'string')
+        : []
+    }
+  })
+}
+
+export function toBoundingBoxes(
+  regions: readonly Region[],
+  width: number,
+  height: number
+): BoundingBox[] {
+  return regions.map((r) => ({
+    x: Math.round(r.x * width),
+    y: Math.round(r.y * height),
+    width: Math.round(r.w * width),
+    height: Math.round(r.h * height),
+    metadata: {
+      type: r.type,
+      text: r.text,
+      desc: r.desc,
+      palette: r.palette.slice()
+    }
+  }))
+}

src/composables/boundingBoxes/useBoundingBoxes.test.ts

@@ -0,0 +1,249 @@
+import { render } from '@testing-library/vue'
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { Ref, ShallowRef } from 'vue'
+import { defineComponent, h, nextTick, ref, shallowRef } from 'vue'
+
+import { useBoundingBoxes } from './useBoundingBoxes'
+import type { BoundingBox } from '@/types/boundingBoxes'
+
+const { appState } = vi.hoisted(() => ({
+  appState: { node: null as unknown }
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: { canvas: { graph: { getNodeById: () => appState.node } } }
+}))
+
+const ctx = {
+  measureText: (s: string) => ({ width: s.length * 7 }),
+  setTransform: () => {},
+  clearRect: () => {},
+  fillRect: () => {},
+  strokeRect: () => {},
+  fillText: () => {},
+  drawImage: () => {},
+  save: () => {},
+  restore: () => {},
+  beginPath: () => {},
+  rect: () => {},
+  clip: () => {},
+  font: '',
+  fillStyle: '',
+  strokeStyle: '',
+  lineWidth: 0
+} as unknown as CanvasRenderingContext2D
+
+function makeCanvas(): HTMLCanvasElement {
+  const el = document.createElement('canvas')
+  Object.defineProperty(el, 'clientWidth', { value: 100, configurable: true })
+  Object.defineProperty(el, 'clientHeight', { value: 100, configurable: true })
+  el.getContext = (() => ctx) as unknown as HTMLCanvasElement['getContext']
+  el.getBoundingClientRect = () =>
+    ({
+      left: 0,
+      top: 0,
+      right: 100,
+      bottom: 100,
+      width: 100,
+      height: 100,
+      x: 0,
+      y: 0,
+      toJSON: () => ({})
+    }) as DOMRect
+  el.focus = () => {}
+  el.setPointerCapture = () => {}
+  el.releasePointerCapture = () => {}
+  return el
+}
+
+function makeNode() {
+  return {
+    widgets: [
+      { name: 'width', value: 512 },
+      { name: 'height', value: 512 }
+    ],
+    findInputSlot: () => -1,
+    getInputNode: () => null
+  }
+}
+
+const pe = (
+  clientX: number,
+  clientY: number,
+  over: Partial<PointerEvent> = {}
+) =>
+  ({
+    button: 0,
+    clientX,
+    clientY,
+    altKey: false,
+    pointerId: 1,
+    preventDefault: () => {},
+    stopPropagation: () => {},
+    ...over
+  }) as unknown as PointerEvent
+
+const flush = async () => {
+  await Promise.resolve()
+  await nextTick()
+}
+
+type Api = ReturnType<typeof useBoundingBoxes>
+interface Captured extends Api {
+  canvasEl: ShallowRef<HTMLCanvasElement | null>
+  modelValue: Ref<BoundingBox[]>
+}
+
+function setup(initial: BoundingBox[] = []) {
+  let captured: Captured | undefined
+  const Harness = defineComponent({
+    setup() {
+      const canvasEl = shallowRef<HTMLCanvasElement | null>(null)
+      const canvasContainer = shallowRef<HTMLDivElement | null>(null)
+      const inlineEditorEl = shallowRef<HTMLTextAreaElement | null>(null)
+      const modelValue = ref(initial)
+      const api = useBoundingBoxes('1', {
+        canvasEl,
+        canvasContainer,
+        inlineEditorEl,
+        modelValue
+      })
+      captured = { canvasEl, modelValue, ...api }
+      return () => h('div')
+    }
+  })
+  render(Harness)
+  captured!.canvasEl.value = makeCanvas()
+  return captured!
+}
+
+const box = (over: Partial<BoundingBox> = {}): BoundingBox => ({
+  x: 51,
+  y: 51,
+  width: 256,
+  height: 256,
+  metadata: { type: 'obj', text: '', desc: '', palette: ['#ff0000'] },
+  ...over
+})
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  appState.node = makeNode()
+  vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+    void Promise.resolve().then(() => cb(0))
+    return 1
+  })
+  vi.stubGlobal('cancelAnimationFrame', () => {})
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('useBoundingBoxes initialization', () => {
+  it('derives regions from the initial model value', () => {
+    const c = setup([box()])
+    expect(c.hasRegions.value).toBe(true)
+    expect(c.activeRegion.value).toMatchObject({ type: 'obj' })
+  })
+
+  it('exposes an aspect-ratio canvas style from the node width/height', () => {
+    const c = setup()
+    expect(c.canvasStyle.value).toEqual({ aspectRatio: '512 / 512' })
+  })
+
+  it('starts with no active region when empty', () => {
+    const c = setup()
+    expect(c.hasRegions.value).toBe(false)
+    expect(c.activeRegion.value).toBeNull()
+  })
+})
+
+describe('useBoundingBoxes drawing', () => {
+  it('draws a new region and syncs it to the model value', async () => {
+    const c = setup()
+    c.onPointerDown(pe(10, 10))
+    c.onCanvasPointerMove(pe(60, 60))
+    c.onDocPointerUp(pe(60, 60))
+    await flush()
+    expect(c.modelValue.value).toHaveLength(1)
+    expect(c.modelValue.value[0].width).toBeGreaterThan(0)
+  })
+
+  it('discards a zero-size draw', async () => {
+    const c = setup()
+    c.onPointerDown(pe(10, 10))
+    c.onDocPointerUp(pe(10, 10))
+    await flush()
+    expect(c.modelValue.value).toHaveLength(0)
+  })
+
+  it('selects an existing region instead of drawing when clicking inside it', async () => {
+    const c = setup([box()])
+    c.onPointerDown(pe(30, 30))
+    c.onDocPointerUp(pe(30, 30))
+    await flush()
+    expect(c.modelValue.value).toHaveLength(1)
+  })
+})
+
+describe('useBoundingBoxes region editing', () => {
+  it('changes the active region type', async () => {
+    const c = setup([box()])
+    c.setActiveType('text')
+    await flush()
+    expect(c.modelValue.value[0].metadata.type).toBe('text')
+  })
+
+  it('deletes the active region on Delete', async () => {
+    const c = setup([box()])
+    c.onCanvasKeyDown({
+      key: 'Delete',
+      preventDefault: () => {},
+      stopPropagation: () => {}
+    } as unknown as KeyboardEvent)
+    await flush()
+    expect(c.modelValue.value).toHaveLength(0)
+  })
+
+  it('clears all regions', async () => {
+    const c = setup([box(), box({ x: 0 })])
+    c.clearAll()
+    await flush()
+    expect(c.modelValue.value).toHaveLength(0)
+  })
+})
+
+describe('useBoundingBoxes inline editor', () => {
+  it('opens on double click and commits the description', async () => {
+    const c = setup([box()])
+    c.onDoubleClick(pe(30, 30) as unknown as MouseEvent)
+    await flush()
+    expect(c.inlineEditor.value).not.toBeNull()
+
+    c.inlineEditor.value!.value = 'a label'
+    c.commitInlineEditor()
+    await flush()
+    expect(c.modelValue.value[0].metadata.desc).toBe('a label')
+    expect(c.inlineEditor.value).toBeNull()
+  })
+
+  it('closes the inline editor on Escape', async () => {
+    const c = setup([box()])
+    c.onDoubleClick(pe(30, 30) as unknown as MouseEvent)
+    await flush()
+    c.onInlineKeyDown({ key: 'Escape' } as KeyboardEvent)
+    expect(c.inlineEditor.value).toBeNull()
+  })
+})
+
+describe('useBoundingBoxes hover cursor', () => {
+  it('switches to a pointer cursor over a tag', async () => {
+    const c = setup([box({ x: 10, y: 10, width: 256, height: 256 })])
+    expect(c.canvasCursor.value).toBe('crosshair')
+    c.onCanvasPointerMove(pe(15, 15))
+    await flush()
+    expect(c.canvasCursor.value).toBe('pointer')
+  })
+})

src/composables/boundingBoxes/useBoundingBoxes.ts

@@ -0,0 +1,614 @@
+import { useElementSize } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import type { Ref, ShallowRef } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+
+import {
+  applyDrag,
+  boxesAt,
+  fromBoundingBoxes,
+  tagRects,
+  toBoundingBoxes
+} from '@/composables/boundingBoxes/boundingBoxesUtil'
+import type {
+  HitMode,
+  Region
+} from '@/composables/boundingBoxes/boundingBoxesUtil'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { app } from '@/scripts/app'
+import { useNodeOutputStore } from '@/stores/nodeOutputStore'
+import type { BoundingBox } from '@/types/boundingBoxes'
+import { readableTextColor, textOnColor } from '@/utils/colorUtil'
+
+const HANDLE_PX = 8
+const DIMENSION_STEP = 16
+const BG_DIM = 0.75
+const MAX_ELEMENT_COLORS = 5
+
+interface InlineEditorState {
+  value: string
+  style: Record<string, string>
+  index: number
+}
+
+interface UseBoundingBoxesOptions {
+  canvasEl: Readonly<ShallowRef<HTMLCanvasElement | null>>
+  canvasContainer: Readonly<ShallowRef<HTMLDivElement | null>>
+  inlineEditorEl: Readonly<ShallowRef<HTMLTextAreaElement | null>>
+  modelValue: Ref<BoundingBox[]>
+}
+
+export function useBoundingBoxes(
+  nodeId: string,
+  {
+    canvasEl,
+    canvasContainer,
+    inlineEditorEl,
+    modelValue
+  }: UseBoundingBoxesOptions
+) {
+  const focused = ref(false)
+  const drawing = ref(false)
+  const dragMode = ref<HitMode | null>(null)
+  const dragStartNorm = ref<{ x: number; y: number } | null>(null)
+  const boxAtStart = ref<Region | null>(null)
+  const hoverIndex = ref<number | null>(null)
+  const hoverTagIndex = ref<number | null>(null)
+  const bgImage = ref<HTMLImageElement | null>(null)
+  const inlineEditor = ref<InlineEditorState | null>(null)
+
+  const { width: containerWidth } = useElementSize(canvasContainer)
+
+  const litegraphNode = computed(() =>
+    nodeId && app.canvas?.graph ? app.canvas.graph.getNodeById(nodeId) : null
+  )
+  const { selectedNodeIds } = storeToRefs(useCanvasStore())
+  const isNodeSelected = computed(() =>
+    selectedNodeIds.value.has(String(nodeId))
+  )
+
+  function dimWidget(name: 'width' | 'height'): number | undefined {
+    const v = litegraphNode.value?.widgets?.find((w) => w.name === name)?.value
+    return typeof v === 'number' && v > 0 ? v : undefined
+  }
+  const widthValue = computed(() => dimWidget('width') ?? 1024)
+  const heightValue = computed(() => dimWidget('height') ?? 1024)
+
+  const state = ref({
+    regions: fromBoundingBoxes(
+      modelValue.value ?? [],
+      widthValue.value,
+      heightValue.value
+    )
+  })
+  const activeIndex = ref(state.value.regions.length ? 0 : -1)
+
+  const aspectRatio = computed(
+    () => `${widthValue.value} / ${heightValue.value}`
+  )
+  const canvasStyle = computed(() => ({ aspectRatio: aspectRatio.value }))
+
+  const activeRegion = computed(() =>
+    activeIndex.value >= 0 ? state.value.regions[activeIndex.value] : null
+  )
+  const hasRegions = computed(() => state.value.regions.length > 0)
+
+  function clampToCanvas(n: number) {
+    return Math.max(0, Math.min(1, n))
+  }
+
+  function logicalSize() {
+    const el = canvasEl.value
+    return { w: el?.clientWidth || 1, h: el?.clientHeight || 1 }
+  }
+
+  function pointerNorm(e: PointerEvent) {
+    const el = canvasEl.value
+    if (!el) return { x: 0, y: 0 }
+    const r = el.getBoundingClientRect()
+    return {
+      x: clampToCanvas((e.clientX - r.left) / r.width),
+      y: clampToCanvas((e.clientY - r.top) / r.height)
+    }
+  }
+
+  let rafHandle = 0
+  function requestDraw() {
+    if (rafHandle) return
+    rafHandle = requestAnimationFrame(() => {
+      rafHandle = 0
+      drawCanvas()
+    })
+  }
+
+  function measureWidth(ctx: CanvasRenderingContext2D, s: string) {
+    return ctx.measureText(s).width
+  }
+
+  function drawCanvas() {
+    const el = canvasEl.value
+    if (!el) return
+    const { w: W, h: H } = logicalSize()
+    const dpr = window.devicePixelRatio || 1
+    const bw = Math.max(1, Math.round(W * dpr))
+    const bh = Math.max(1, Math.round(H * dpr))
+    if (el.width !== bw || el.height !== bh) {
+      el.width = bw
+      el.height = bh
+    }
+    const ctx = el.getContext('2d')
+    if (!ctx) return
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.clearRect(0, 0, W, H)
+
+    if (bgImage.value) {
+      ctx.drawImage(bgImage.value, 0, 0, W, H)
+      ctx.fillStyle = `rgba(0,0,0,${BG_DIM})`
+      ctx.fillRect(0, 0, W, H)
+    }
+
+    const showActive = focused.value || isNodeSelected.value
+    const aIdx = showActive ? activeIndex.value : -1
+    const order = state.value.regions
+      .map((_, i) => i)
+      .filter((i) => i !== aIdx)
+      .reverse()
+    if (aIdx >= 0 && aIdx < state.value.regions.length) order.push(aIdx)
+
+    ctx.font = 'bold 11px monospace'
+    const tag_rects = tagRects(state.value.regions, W, H, (s) =>
+      measureWidth(ctx, s)
+    )
+
+    for (const i of order) {
+      const b = state.value.regions[i]
+      const active = i === aIdx
+      const pal = (b.palette || []).filter(Boolean)
+      const col = pal.length ? pal[0] : '#8c8c8c'
+      const x1 = b.x * W
+      const y1 = b.y * H
+      const x2 = (b.x + b.w) * W
+      const y2 = (b.y + b.h) * H
+      const w = x2 - x1
+      const h = y2 - y1
+      const hovered = i === hoverIndex.value || active
+
+      if (active) {
+        ctx.fillStyle = 'rgba(26,26,26,0.88)'
+        ctx.fillRect(x1, y1, w, h)
+      }
+      ctx.fillStyle = col + (hovered ? '3a' : '22')
+      ctx.fillRect(x1, y1, w, h)
+
+      const lw = active ? 2 : hovered ? 1.5 : 1
+      ctx.strokeStyle = col
+      ctx.lineWidth = lw
+      ctx.strokeRect(x1 + lw / 2, y1 + lw / 2, w - lw, h - lw)
+
+      if (pal.length) {
+        const sw = w / pal.length
+        const sh = 7
+        for (let p = 0; p < pal.length; p++) {
+          const sx = x1 + Math.round(p * sw)
+          ctx.fillStyle = pal[p]
+          ctx.fillRect(sx, y1, x1 + Math.round((p + 1) * sw) - sx, sh)
+        }
+      }
+
+      ctx.save()
+      ctx.beginPath()
+      ctx.rect(x1, y1, w, h)
+      ctx.clip()
+
+      let body = b.desc || ''
+      if (b.type === 'text' && b.text)
+        body = `"${b.text}"` + (body ? ` — ${body}` : '')
+      if (body) {
+        ctx.font = '12px monospace'
+        ctx.fillStyle = readableTextColor(col)
+        const pad = 4
+        const lh = 14
+        let ty = y1 + 15 + 12
+        for (const line of wrapLines(ctx, body, w - pad * 2)) {
+          if (ty > y1 + h) break
+          ctx.fillText(line, x1 + pad, ty)
+          ty += lh
+        }
+      }
+
+      const tr = tag_rects[i]
+      ctx.font = 'bold 11px monospace'
+      ctx.fillStyle = col
+      ctx.fillRect(tr.x, tr.y, tr.w, 14)
+      if (i === hoverTagIndex.value) {
+        ctx.fillStyle = 'rgba(255,255,255,0.25)'
+        ctx.fillRect(tr.x, tr.y, tr.w, 14)
+        ctx.strokeStyle = '#fff'
+        ctx.lineWidth = 1
+        ctx.strokeRect(tr.x + 0.5, tr.y + 0.5, tr.w - 1, 13)
+      }
+      ctx.fillStyle = textOnColor(col)
+      ctx.fillText(tr.tag, tr.x + 4, tr.y + 11)
+      ctx.restore()
+    }
+  }
+
+  function wrapLines(
+    ctx: CanvasRenderingContext2D,
+    text: string,
+    maxW: number
+  ): string[] {
+    const out: string[] = []
+    for (const para of text.split('\n')) {
+      let line = ''
+      for (const word of para.split(/\s+/)) {
+        if (!word) continue
+        const test = line ? `${line} ${word}` : word
+        if (line && ctx.measureText(test).width > maxW) {
+          out.push(line)
+          line = word
+        } else {
+          line = test
+        }
+      }
+      out.push(line)
+    }
+    return out
+  }
+
+  const hitTestPoint = (mN: { x: number; y: number }) => {
+    const { w: W, h: H } = logicalSize()
+    const cands = boxesAt(
+      state.value.regions,
+      mN.x,
+      mN.y,
+      HANDLE_PX,
+      W,
+      H,
+      activeIndex.value
+    )
+    if (!cands.length) return null
+    return (
+      cands.find((c) => c.index === activeIndex.value && c.mode !== 'move') ||
+      cands[0]
+    )
+  }
+
+  const titleAt = (mN: { x: number; y: number }) => {
+    const el = canvasEl.value
+    if (!el) return null
+    const ctx = el.getContext('2d')
+    if (!ctx) return null
+    const { w: W, h: H } = logicalSize()
+    const rects = tagRects(state.value.regions, W, H, (s) =>
+      measureWidth(ctx, s)
+    )
+    const px = mN.x * W
+    const py = mN.y * H
+    for (let i = state.value.regions.length - 1; i >= 0; i--) {
+      const r = rects[i]
+      if (r && px >= r.x && px <= r.x + r.w && py >= r.y && py <= r.y + r.h)
+        return i
+    }
+    return null
+  }
+
+  function pickForSelection(mN: { x: number; y: number }, cycle: boolean) {
+    const { w: W, h: H } = logicalSize()
+    const cands = boxesAt(
+      state.value.regions,
+      mN.x,
+      mN.y,
+      HANDLE_PX,
+      W,
+      H,
+      activeIndex.value
+    )
+    if (!cands.length) return null
+    const activeResize = cands.find(
+      (c) => c.index === activeIndex.value && c.mode !== 'move'
+    )
+    if (activeResize && !cycle) return activeResize
+    const ti = titleAt(mN)
+    if (ti !== null && !cycle) return { index: ti, mode: 'move' as HitMode }
+    if (cycle && cands.length > 1) {
+      const pos = cands.findIndex((c) => c.index === activeIndex.value)
+      return cands[(pos + 1) % cands.length]
+    }
+    return (
+      cands.find((c) => c.index === activeIndex.value && c.mode !== 'move') ||
+      cands[0]
+    )
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    if (e.button !== 0) return
+    canvasEl.value?.focus()
+    hoverTagIndex.value = null
+    hoverIndex.value = null
+    const mN = pointerNorm(e)
+    const hit = pickForSelection(mN, e.altKey)
+    if (hit) {
+      activeIndex.value = hit.index
+      dragMode.value = hit.mode
+      boxAtStart.value = { ...state.value.regions[hit.index] }
+    } else {
+      dragMode.value = 'draw'
+      const nb: Region = {
+        x: mN.x,
+        y: mN.y,
+        w: 0,
+        h: 0,
+        type: 'obj',
+        text: '',
+        desc: '',
+        palette: []
+      }
+      state.value.regions.push(nb)
+      activeIndex.value = state.value.regions.length - 1
+      boxAtStart.value = { ...nb }
+    }
+    drawing.value = true
+    dragStartNorm.value = mN
+    canvasEl.value?.setPointerCapture(e.pointerId)
+    e.preventDefault()
+    requestDraw()
+  }
+
+  function onDocPointerMove(e: PointerEvent) {
+    if (
+      !drawing.value ||
+      !boxAtStart.value ||
+      !dragStartNorm.value ||
+      !dragMode.value
+    )
+      return
+    const mN = pointerNorm(e)
+    const dx = mN.x - dragStartNorm.value.x
+    const dy = mN.y - dragStartNorm.value.y
+    const nb = applyDrag(dragMode.value, boxAtStart.value, dx, dy)
+    state.value.regions[activeIndex.value] = nb
+    requestDraw()
+  }
+
+  function onDocPointerUp(e: PointerEvent) {
+    if (!drawing.value) return
+    drawing.value = false
+    canvasEl.value?.releasePointerCapture?.(e.pointerId)
+    const b = state.value.regions[activeIndex.value]
+    if (b && (b.w < 0.005 || b.h < 0.005) && dragMode.value === 'draw') {
+      removeRegion(activeIndex.value)
+    }
+    syncState()
+  }
+
+  function onCanvasPointerMove(e: PointerEvent) {
+    if (drawing.value) onDocPointerMove(e)
+    else onPointerMove(e)
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (drawing.value) return
+    const mN = pointerNorm(e)
+    const ti = titleAt(mN)
+    const hit = hitTestPoint(mN)
+    const hb = ti !== null ? ti : hit ? hit.index : null
+    if (ti !== hoverTagIndex.value || hb !== hoverIndex.value) {
+      hoverTagIndex.value = ti
+      hoverIndex.value = hb
+      requestDraw()
+    }
+  }
+
+  function onPointerLeave() {
+    if (hoverTagIndex.value !== null || hoverIndex.value !== null) {
+      hoverTagIndex.value = null
+      hoverIndex.value = null
+      requestDraw()
+    }
+  }
+
+  const canvasCursor = computed(() =>
+    hoverTagIndex.value !== null ? 'pointer' : 'crosshair'
+  )
+
+  function onDoubleClick(e: MouseEvent) {
+    e.preventDefault()
+    const mN = pointerNormFromMouse(e)
+    const { w: W, h: H } = logicalSize()
+    const cands = boxesAt(
+      state.value.regions,
+      mN.x,
+      mN.y,
+      HANDLE_PX,
+      W,
+      H,
+      activeIndex.value
+    )
+    const target = cands.find((c) => c.index === activeIndex.value) || cands[0]
+    if (!target) return
+    openInlineEditor(target.index)
+  }
+
+  function pointerNormFromMouse(e: MouseEvent) {
+    const el = canvasEl.value
+    if (!el) return { x: 0, y: 0 }
+    const r = el.getBoundingClientRect()
+    return {
+      x: clampToCanvas((e.clientX - r.left) / r.width),
+      y: clampToCanvas((e.clientY - r.top) / r.height)
+    }
+  }
+
+  function openInlineEditor(index: number) {
+    const b = state.value.regions[index]
+    if (!b) return
+    activeIndex.value = index
+    const { w: W, h: H } = logicalSize()
+    const w = Math.min(W, Math.max(70, b.w * W))
+    const h = Math.min(H, Math.max(42, b.h * H))
+    const left = Math.max(0, Math.min(b.x * W, W - w))
+    const top = Math.max(0, Math.min(b.y * H, H - h))
+    inlineEditor.value = {
+      value: b.desc || '',
+      index,
+      style: {
+        left: `${left}px`,
+        top: `${top}px`,
+        width: `${w}px`,
+        height: `${h}px`,
+        borderColor: (b.palette || []).find(Boolean) || '#46b4e6'
+      }
+    }
+    void nextTick(() => {
+      inlineEditorEl.value?.focus()
+      inlineEditorEl.value?.select()
+    })
+  }
+
+  function onInlineKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      inlineEditor.value = null
+    } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      commitInlineEditor()
+    }
+  }
+
+  function commitInlineEditor() {
+    const ed = inlineEditor.value
+    if (!ed) return
+    const b = state.value.regions[ed.index]
+    if (b) b.desc = ed.value
+    inlineEditor.value = null
+    syncState()
+  }
+
+  function onCanvasKeyDown(e: KeyboardEvent) {
+    if (drawing.value) return
+    const idx = activeIndex.value
+    if ((e.key === 'Delete' || e.key === 'Backspace') && idx >= 0) {
+      e.preventDefault()
+      e.stopPropagation()
+      removeRegion(idx)
+      syncState()
+    }
+  }
+
+  function removeRegion(i: number) {
+    state.value.regions.splice(i, 1)
+    if (!state.value.regions.length) activeIndex.value = -1
+    else if (i <= activeIndex.value)
+      activeIndex.value = Math.max(0, activeIndex.value - 1)
+  }
+
+  function setActiveType(t: 'obj' | 'text') {
+    if (activeRegion.value) {
+      activeRegion.value.type = t
+      syncState()
+    }
+  }
+
+  function clearAll() {
+    state.value.regions = []
+    activeIndex.value = -1
+    syncState()
+  }
+
+  function syncState() {
+    modelValue.value = toBoundingBoxes(
+      state.value.regions,
+      widthValue.value,
+      heightValue.value
+    )
+    requestDraw()
+  }
+
+  watch(containerWidth, () => requestDraw())
+  watch(
+    () => state.value.regions.length,
+    () => requestDraw()
+  )
+  watch(isNodeSelected, () => requestDraw())
+  watch([widthValue, heightValue], () => syncState())
+
+  const nodeOutputStore = useNodeOutputStore()
+  function applyImageDimensions(naturalWidth: number, naturalHeight: number) {
+    const node = litegraphNode.value
+    if (!node) return
+    const snap = (v: number) =>
+      Math.max(DIMENSION_STEP, Math.round(v / DIMENSION_STEP) * DIMENSION_STEP)
+    const targetW = snap(naturalWidth)
+    const targetH = snap(naturalHeight)
+    const widthWidget = node.widgets?.find((w) => w.name === 'width')
+    const heightWidget = node.widgets?.find((w) => w.name === 'height')
+    if (widthWidget && widthWidget.value !== targetW) {
+      widthWidget.value = targetW
+      widthWidget.callback?.(targetW)
+    }
+    if (heightWidget && heightWidget.value !== targetH) {
+      heightWidget.value = targetH
+      heightWidget.callback?.(targetH)
+    }
+  }
+
+  let lastBgUrl = ''
+  function updateBgImage() {
+    const node = litegraphNode.value
+    if (!node) return
+    const slot = node.findInputSlot('background')
+    const inputNode = slot >= 0 ? node.getInputNode(slot) : null
+    const url = inputNode
+      ? nodeOutputStore.getNodeImageUrls(inputNode)?.[0]
+      : undefined
+    if (!url) {
+      if (bgImage.value) {
+        bgImage.value = null
+        lastBgUrl = ''
+        requestDraw()
+      }
+      return
+    }
+    if (url === lastBgUrl) return
+    lastBgUrl = url
+    const currentUrl = url
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.onload = () => {
+      if (currentUrl !== lastBgUrl) return
+      bgImage.value = img
+      applyImageDimensions(img.naturalWidth, img.naturalHeight)
+      requestDraw()
+    }
+    img.src = url
+  }
+  watch(() => nodeOutputStore.nodeOutputs, updateBgImage, { deep: true })
+  watch(() => nodeOutputStore.nodePreviewImages, updateBgImage, { deep: true })
+
+  updateBgImage()
+  void nextTick(() => requestDraw())
+
+  onBeforeUnmount(() => {
+    if (rafHandle) cancelAnimationFrame(rafHandle)
+  })
+
+  return {
+    canvasStyle,
+    canvasCursor,
+    focused,
+    activeRegion,
+    hasRegions,
+    inlineEditor,
+    maxColors: MAX_ELEMENT_COLORS,
+    onPointerDown,
+    onCanvasPointerMove,
+    onDocPointerUp,
+    onPointerLeave,
+    onDoubleClick,
+    onCanvasKeyDown,
+    onInlineKeyDown,
+    commitInlineEditor,
+    setActiveType,
+    clearAll,
+    syncState
+  }
+}

src/composables/graph/useErrorClearingHooks.test.ts

@@ -4,8 +4,12 @@ import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { installErrorClearingHooks } from '@/composables/graph/useErrorClearingHooks'
-import { promoteValueWidgetViaSubgraphInput } from '@/core/graph/subgraph/promotionUtils'
 import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type {
+  CanvasPointer,
+  CanvasPointerEvent,
+  LGraphCanvas
+} from '@/lib/litegraph/src/litegraph'
 import {
   createTestSubgraph,
   createTestSubgraphNode
@@ -252,6 +256,273 @@ describe('Widget change error clearing via onWidgetChanged', () => {
     expect(store.lastNodeErrors).toBeNull()
     expect(mediaStore.missingMediaCandidates).toBeNull()
   })
+
+  it('uses interior node execution ID for promoted widget error clearing', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'ckpt_input', type: '*' }]
+    })
+    const interiorNode = new LGraphNode('CheckpointLoaderSimple')
+    const interiorInput = interiorNode.addInput('ckpt_input', '*')
+    interiorNode.addWidget(
+      'combo',
+      'ckpt_name',
+      'model.safetensors',
+      () => undefined,
+      { values: ['model.safetensors'] }
+    )
+    interiorInput.widget = { name: 'ckpt_name' }
+    subgraph.add(interiorNode)
+    subgraph.inputNode.slots[0].connect(interiorInput, interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 65 })
+    subgraphNode._internalConfigureAfterSlots()
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const store = useExecutionErrorStore()
+    const interiorExecId = `${subgraphNode.id}:${interiorNode.id}`
+
+    const promotedWidget = subgraphNode.widgets?.find(
+      (w) => 'sourceWidgetName' in w && w.sourceWidgetName === 'ckpt_name'
+    )
+    expect(promotedWidget).toBeDefined()
+
+    seedRequiredInputMissingNodeError(store, interiorExecId, 'ckpt_name')
+
+    subgraphNode.onWidgetChanged!.call(
+      subgraphNode,
+      'ckpt_name',
+      'other_model.safetensors',
+      'model.safetensors',
+      promotedWidget!
+    )
+
+    expect(store.lastNodeErrors).toBeNull()
+  })
+
+  it('clears range errors for promoted widgets by interior widget name', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'steps_input', type: 'INT' }]
+    })
+    const interiorNode = new LGraphNode('KSampler')
+    const interiorInput = interiorNode.addInput('steps_input', 'INT')
+    interiorNode.addWidget('number', 'steps', 150, () => undefined, {
+      min: 1,
+      max: 100
+    })
+    interiorInput.widget = { name: 'steps' }
+    subgraph.add(interiorNode)
+    subgraph.inputNode.slots[0].connect(interiorInput, interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 65 })
+    subgraphNode._internalConfigureAfterSlots()
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const store = useExecutionErrorStore()
+    const interiorExecId = `${subgraphNode.id}:${interiorNode.id}`
+    store.lastNodeErrors = {
+      [interiorExecId]: {
+        errors: [
+          {
+            type: 'value_bigger_than_max',
+            message: 'Too big',
+            details: '',
+            extra_info: { input_name: 'steps' }
+          }
+        ],
+        dependent_outputs: [],
+        class_type: 'KSampler'
+      }
+    }
+
+    const promotedWidget = subgraphNode.widgets?.find(
+      (w) => 'sourceWidgetName' in w && w.sourceWidgetName === 'steps'
+    )
+    expect(promotedWidget).toBeDefined()
+
+    subgraphNode.onWidgetChanged!.call(
+      subgraphNode,
+      'steps',
+      50,
+      150,
+      promotedWidget!
+    )
+
+    expect(store.lastNodeErrors).toBeNull()
+  })
+
+  it('clears missing model state when a promoted widget changes through the legacy canvas path', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'ckpt_input', type: '*' }]
+    })
+    const interiorNode = new LGraphNode('CheckpointLoaderSimple')
+    interiorNode.type = 'CheckpointLoaderSimple'
+    const interiorInput = interiorNode.addInput('ckpt_input', '*')
+    interiorNode.addWidget(
+      'combo',
+      'ckpt_name',
+      'missing.safetensors',
+      () => undefined,
+      { values: ['missing.safetensors', 'present.safetensors'] }
+    )
+    interiorInput.widget = { name: 'ckpt_name' }
+    subgraph.add(interiorNode)
+    subgraph.inputNode.slots[0].connect(interiorInput, interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, {
+      id: 65,
+      pos: [0, 0],
+      size: [200, 100]
+    })
+    subgraphNode._internalConfigureAfterSlots()
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const missingModelStore = useMissingModelStore()
+    const interiorExecId = `${subgraphNode.id}:${interiorNode.id}`
+    missingModelStore.setMissingModels([
+      {
+        nodeId: interiorExecId,
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'missing.safetensors',
+        isMissing: true
+      } satisfies MissingModelCandidate
+    ])
+
+    const promotedWidget = subgraphNode.widgets?.find(
+      (widget) =>
+        'sourceWidgetName' in widget && widget.sourceWidgetName === 'ckpt_name'
+    )
+    expect(promotedWidget).toBeDefined()
+
+    const clickEvent = fromAny<CanvasPointerEvent, unknown>({
+      canvasX: 190,
+      canvasY: 20,
+      deltaX: 0
+    })
+    const pointer = fromAny<CanvasPointer, unknown>({
+      eDown: clickEvent
+    })
+    const canvas = fromAny<LGraphCanvas, unknown>({
+      graph_mouse: [190, 20],
+      last_mouseclick: 0
+    })
+
+    const handled = promotedWidget!.onPointerDown?.(
+      pointer,
+      subgraphNode,
+      canvas
+    )
+    expect(handled).toBe(true)
+    expect(pointer.onClick).toBeDefined()
+
+    pointer.onClick?.(clickEvent)
+
+    expect(missingModelStore.missingModelCandidates).toBeNull()
+  })
+
+  it('keeps unchanged same-named promoted model targets on the canvas path', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [
+        { name: 'first_ckpt', type: '*' },
+        { name: 'second_ckpt', type: '*' }
+      ]
+    })
+    const firstNode = new LGraphNode('CheckpointLoaderSimple')
+    firstNode.type = 'CheckpointLoaderSimple'
+    const firstInput = firstNode.addInput('first_ckpt', '*')
+    const firstWidget = firstNode.addWidget(
+      'combo',
+      'ckpt_name',
+      'missing.safetensors',
+      () => undefined,
+      { values: ['missing.safetensors', 'present.safetensors'] }
+    )
+    firstInput.widget = { name: 'ckpt_name' }
+    subgraph.add(firstNode)
+    subgraph.inputNode.slots[0].connect(firstInput, firstNode)
+
+    const secondNode = new LGraphNode('CheckpointLoaderSimple')
+    secondNode.type = 'CheckpointLoaderSimple'
+    const secondInput = secondNode.addInput('second_ckpt', '*')
+    secondNode.addWidget(
+      'combo',
+      'ckpt_name',
+      'missing.safetensors',
+      () => undefined,
+      { values: ['missing.safetensors', 'present.safetensors'] }
+    )
+    secondInput.widget = { name: 'ckpt_name' }
+    subgraph.add(secondNode)
+    subgraph.inputNode.slots[1].connect(secondInput, secondNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 65 })
+    subgraphNode._internalConfigureAfterSlots()
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const promotedWidgets =
+      subgraphNode.widgets?.filter(
+        (widget) =>
+          'sourceWidgetName' in widget &&
+          widget.sourceWidgetName === 'ckpt_name'
+      ) ?? []
+    expect(promotedWidgets).toHaveLength(2)
+
+    const missingModelStore = useMissingModelStore()
+    const firstExecId = `${subgraphNode.id}:${firstNode.id}`
+    const secondExecId = `${subgraphNode.id}:${secondNode.id}`
+    missingModelStore.setMissingModels([
+      {
+        nodeId: firstExecId,
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'missing.safetensors',
+        isMissing: true
+      } satisfies MissingModelCandidate,
+      {
+        nodeId: secondExecId,
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'missing.safetensors',
+        isMissing: true
+      } satisfies MissingModelCandidate
+    ])
+
+    firstWidget.value = 'present.safetensors'
+    subgraphNode.onWidgetChanged!.call(
+      subgraphNode,
+      'ckpt_name',
+      'present.safetensors',
+      'missing.safetensors',
+      firstWidget
+    )
+
+    expect(missingModelStore.missingModelCandidates).toEqual([
+      expect.objectContaining({
+        nodeId: secondExecId,
+        widgetName: 'ckpt_name',
+        name: 'missing.safetensors'
+      })
+    ])
+  })
 })
 
 describe('installErrorClearingHooks lifecycle', () => {
@@ -978,54 +1249,4 @@ describe('clearWidgetRelatedErrors parameter routing', () => {
 
     clearSpy.mockRestore()
   })
-
-  it('clears promoted widget errors by interior execution id', () => {
-    const subgraph = createTestSubgraph()
-    const graph = subgraph.rootGraph
-    const host = createTestSubgraphNode(subgraph, { id: 2 })
-    graph.add(host)
-
-    const interiorNode = new LGraphNode('CheckpointLoaderSimple')
-    interiorNode.id = 1
-    subgraph.add(interiorNode)
-    const input = interiorNode.addInput('ckpt_name', 'COMBO')
-    const widget = interiorNode.addWidget(
-      'combo',
-      'ckpt_name',
-      'fake_model.safetensors',
-      () => undefined,
-      { values: ['fake_model.safetensors', 'real_model.safetensors'] }
-    )
-    input.widget = { name: widget.name }
-
-    expect(
-      promoteValueWidgetViaSubgraphInput(host, interiorNode, widget).ok
-    ).toBe(true)
-    installErrorClearingHooks(graph)
-
-    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
-    const missingModelStore = useMissingModelStore()
-    missingModelStore.setMissingModels([
-      {
-        nodeId: '2:1',
-        nodeType: 'CheckpointLoaderSimple',
-        widgetName: 'ckpt_name',
-        isAssetSupported: false,
-        name: 'fake_model.safetensors',
-        directory: 'checkpoints',
-        isMissing: true
-      }
-    ])
-
-    const promotedWidget = host.widgets[0]
-    host.onWidgetChanged!.call(
-      host,
-      promotedWidget.name,
-      'real_model.safetensors',
-      'fake_model.safetensors',
-      promotedWidget
-    )
-
-    expect(missingModelStore.hasMissingModels).toBe(false)
-  })
 })

src/composables/graph/useErrorClearingHooks.ts

@@ -6,9 +6,12 @@
  * works in legacy canvas mode as well.
  */
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { widgetPromotedSource } from '@/core/graph/subgraph/promotedInputWidget'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+import type { PromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+import { resolveConcretePromotedWidget } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import {
   LGraphEventMode,
   NodeSlotType
@@ -43,6 +46,130 @@ import {
   isAncestorPathActive
 } from '@/utils/graphTraversalUtil'
 
+interface WidgetErrorClearingTarget {
+  executionId: string
+  validationInputName: string
+  assetWidgetName: string
+  currentValue: unknown
+  options?: { min?: number; max?: number }
+}
+
+function getWidgetRangeOptions(widget: IBaseWidget): {
+  min?: number
+  max?: number
+} {
+  return {
+    min: widget.options?.min,
+    max: widget.options?.max
+  }
+}
+
+function plainWidgetToErrorTarget(
+  widget: IBaseWidget,
+  hostExecId: string
+): WidgetErrorClearingTarget {
+  return {
+    executionId: hostExecId,
+    validationInputName: widget.name,
+    assetWidgetName: widget.name,
+    currentValue: widget.value,
+    options: getWidgetRangeOptions(widget)
+  }
+}
+
+function promotedWidgetToErrorTarget(
+  rootGraph: LGraph,
+  hostNode: LGraphNode,
+  widget: PromotedWidgetView,
+  hostExecId: string
+): WidgetErrorClearingTarget {
+  const result = resolveConcretePromotedWidget(
+    hostNode,
+    widget.sourceNodeId,
+    widget.sourceWidgetName
+  )
+  const execId =
+    result.status === 'resolved' && result.resolved.node
+      ? (getExecutionIdByNode(rootGraph, result.resolved.node) ?? hostExecId)
+      : hostExecId
+  const resolvedWidget =
+    result.status === 'resolved' ? result.resolved.widget : widget
+
+  return {
+    executionId: execId,
+    validationInputName: resolvedWidget.name,
+    assetWidgetName: widget.sourceWidgetName,
+    currentValue: resolvedWidget.value,
+    options: getWidgetRangeOptions(resolvedWidget)
+  }
+}
+
+function resolveCanvasPathPromotedWidgetTargets(
+  rootGraph: LGraph,
+  hostNode: LGraphNode,
+  widget: IBaseWidget,
+  hostExecId: string,
+  newValue: unknown
+): WidgetErrorClearingTarget[] {
+  if (!hostNode.isSubgraphNode?.() || isPromotedWidgetView(widget)) return []
+
+  // Canvas-path events lose promoted identity, so the post-write value
+  // disambiguates same-named promoted widgets.
+  return (hostNode.widgets ?? [])
+    .filter(isPromotedWidgetView)
+    .filter((promotedWidget) => promotedWidget.sourceWidgetName === widget.name)
+    .map((promotedWidget) =>
+      promotedWidgetToErrorTarget(
+        rootGraph,
+        hostNode,
+        promotedWidget,
+        hostExecId
+      )
+    )
+    .filter((target) => Object.is(target.currentValue, newValue))
+}
+
+function resolveWidgetErrorTargets(
+  rootGraph: LGraph,
+  hostNode: LGraphNode,
+  widget: IBaseWidget,
+  hostExecId: string,
+  newValue: unknown
+): WidgetErrorClearingTarget[] {
+  if (isPromotedWidgetView(widget)) {
+    return [
+      promotedWidgetToErrorTarget(rootGraph, hostNode, widget, hostExecId)
+    ]
+  }
+
+  const canvasPathTargets = resolveCanvasPathPromotedWidgetTargets(
+    rootGraph,
+    hostNode,
+    widget,
+    hostExecId,
+    newValue
+  )
+  return canvasPathTargets.length
+    ? canvasPathTargets
+    : [plainWidgetToErrorTarget(widget, hostExecId)]
+}
+
+function clearWidgetErrorTargets(
+  targets: WidgetErrorClearingTarget[],
+  newValue: unknown
+): void {
+  const store = useExecutionErrorStore()
+  for (const target of targets) {
+    store.clearWidgetRelatedErrors(
+      target.executionId,
+      target.validationInputName,
+      target.assetWidgetName,
+      newValue,
+      target.options
+    )
+  }
+}
+
 const hookedNodes = new WeakSet<LGraphNode>()
 
 type OriginalCallbacks = {
@@ -76,24 +203,21 @@ function installNodeHooks(node: LGraphNode): void {
 
   node.onWidgetChanged = useChainCallback(
     node.onWidgetChanged,
+    // _name is the LiteGraph callback arg; re-derive from the widget
+    // object to handle promoted widgets where sourceWidgetName differs.
     function (_name, newValue, _oldValue, widget) {
       if (!app.rootGraph) return
       const hostExecId = getExecutionIdByNode(app.rootGraph, node)
       if (!hostExecId) return
 
-      const promotedSource = widgetPromotedSource(node, widget)
-      const executionId = promotedSource
-        ? `${hostExecId}:${promotedSource.nodeId}`
-        : hostExecId
-      const widgetName = promotedSource?.widgetName ?? widget.name
-
-      useExecutionErrorStore().clearWidgetRelatedErrors(
-        executionId,
-        widgetName,
-        widgetName,
-        newValue,
-        { min: widget.options?.min, max: widget.options?.max }
+      const targets = resolveWidgetErrorTargets(
+        app.rootGraph,
+        node,
+        widget,
+        hostExecId,
+        newValue
       )
+      clearWidgetErrorTargets(targets, newValue)
     }
   )
 }