[backport cloud/1.41] [bugfix] Align advanced footer design with subgraph footer layout (#10012)

Backport of #9879 to `cloud/1.41`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10012-backport-cloud-1-41-bugfix-Align-advanced-footer-design-with-subgraph-footer-layout-3256d73d3650810e8f18ca77cfa409e0)
by [Unito](https://www.unito.io)

Co-authored-by: jaeone94 <89377375+jaeone94@users.noreply.github.com>

.env_example

@@ -38,6 +38,9 @@ TEST_COMFYUI_DIR=/home/ComfyUI
 ALGOLIA_APP_ID=4E0RO38HS8
 ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
 
+# Enable PostHog debug logging in the browser console.
+# VITE_POSTHOG_DEBUG=true
+
 # Sentry ENV vars replace with real ones for debugging
 # SENTRY_AUTH_TOKEN=private-token # get from sentry
 # SENTRY_ORG=comfy-org

.github/workflows/api-update-electron-api-types.yaml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Update electron types

.github/workflows/api-update-manager-api-types.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/api-update-registry-api-types.yaml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -26,7 +26,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/ci-oss-assets-validation.yaml

@@ -27,7 +27,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -82,7 +82,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/cloud-dispatch-build.yaml

@@ -14,7 +14,7 @@ on:
       - 'cloud/*'
       - 'main'
   pull_request:
-    types: [labeled, synchronize]
+    types: [labeled]
   workflow_dispatch:
 
 permissions: {}
@@ -26,18 +26,11 @@ concurrency:
 jobs:
   dispatch:
     # Fork guard: prevent forks from dispatching to the cloud repo.
-    # For pull_request events, only dispatch for preview labels.
-    # - labeled: fires when a label is added; check the added label name.
-    # - synchronize: fires on push; check existing labels on the PR.
+    # For pull_request events, only dispatch when the 'preview' label is added.
     if: >
       github.repository == 'Comfy-Org/ComfyUI_frontend' &&
       (github.event_name != 'pull_request' ||
-       (github.event.action == 'labeled' &&
-        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
-       (github.event.action == 'synchronize' &&
-        (contains(github.event.pull_request.labels.*.name, 'preview') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))
+       github.event.label.name == 'preview')
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload

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

@@ -36,7 +36,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '20'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

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

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 22
 
       - name: Download PR metadata
         uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12

.github/workflows/publish-desktop-ui-on-merge.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '24.x'
 
       - name: Read desktop-ui version
         id: get_version

.github/workflows/publish-desktop-ui.yaml

@@ -91,7 +91,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '24.x'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

.github/workflows/release-biweekly-comfyui.yaml

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: 'frontend/.nvmrc'
+          node-version: lts/*
 
       - name: Install dependencies
         working-directory: frontend

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

@@ -26,7 +26,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
 
       - name: Check version bump type
         id: check_version

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

@@ -26,7 +26,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Get current version

.github/workflows/release-npm-types.yaml

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

.github/workflows/release-pypi-dev.yaml

@@ -22,7 +22,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Get current version

.github/workflows/release-version-bump.yaml

@@ -149,7 +149,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
 
       - name: Bump version
         id: bump-version

.github/workflows/version-bump-desktop-ui.yaml

@@ -58,7 +58,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '24.x'
           cache: 'pnpm'
 
       - name: Bump desktop-ui version

.github/workflows/weekly-docs-check.yaml

@@ -35,7 +35,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '20'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

.gitignore

@@ -26,6 +26,7 @@ dist-ssr
 .claude/*.local.json
 .claude/*.local.md
 .claude/*.local.txt
+.claude/worktrees
 CLAUDE.local.md
 
 # Editor directories and files

CONTRIBUTING.md

@@ -17,7 +17,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 ### Prerequisites & Technology Stack
 
 - **Required Software**:
-  - Node.js (see `.nvmrc`, currently v24) and pnpm
+  - Node.js (v24) and pnpm
   - Git for version control
   - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 

browser_tests/README.md

@@ -27,8 +27,7 @@ cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
 
 ### Node.js & Playwright Prerequisites
 
-Ensure you have the Node.js version from `.nvmrc` installed (currently v24).
-Then, set up the Chromium test driver:
+Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:
 
 ```bash
 pnpm exec playwright install chromium --with-deps

browser_tests/assets/nodes/load_image_with_ksampler.json

@@ -0,0 +1,47 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [50, 50],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "IMAGE", "type": "IMAGE", "links": null },
+        { "name": "MASK", "type": "MASK", "links": null }
+      ],
+      "properties": { "Node name for S&R": "LoadImage" },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 2,
+      "type": "KSampler",
+      "pos": [500, 50],
+      "size": [315, 262],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [{ "name": "LATENT", "type": "LATENT", "links": null }],
+      "properties": { "Node name for S&R": "KSampler" },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "normal", 1]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": { "offset": [0, 0], "scale": 1 }
+  },
+  "version": 0.4
+}

browser_tests/tests/groupCopyPaste.spec.ts

@@ -0,0 +1,44 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Group Copy Paste', { tag: ['@canvas'] }, () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.canvasOps.resetView()
+  })
+
+  test('Pasted group is offset from original position', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('groups/single_group_only')
+
+    const titlePos = await comfyPage.page.evaluate(() => {
+      const app = window.app!
+      const group = app.graph.groups[0]
+      const clientPos = app.canvasPosToClientPos([
+        group.pos[0] + 50,
+        group.pos[1] + 15
+      ])
+      return { x: clientPos[0], y: clientPos[1] }
+    })
+    await comfyPage.canvas.click({ position: titlePos })
+    await comfyPage.nextFrame()
+
+    await comfyPage.clipboard.copy()
+    await comfyPage.clipboard.paste()
+    await comfyPage.nextFrame()
+
+    const positions = await comfyPage.page.evaluate(() =>
+      window.app!.graph.groups.map((g: { pos: number[] }) => ({
+        x: g.pos[0],
+        y: g.pos[1]
+      }))
+    )
+
+    expect(positions).toHaveLength(2)
+    const dx = Math.abs(positions[0].x - positions[1].x)
+    const dy = Math.abs(positions[0].y - positions[1].y)
+    expect(dx).toBeCloseTo(50, 0)
+    expect(dy).toBeCloseTo(15, 0)
+  })
+})

browser_tests/tests/imagePastePriority.spec.ts

@@ -0,0 +1,58 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe(
+  'Image paste priority over stale node metadata',
+  { tag: ['@node'] },
+  () => {
+    test('Should not paste copied node when a LoadImage node is selected and clipboard has stale node metadata', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('nodes/load_image_with_ksampler')
+
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(initialCount).toBe(2)
+
+      // Copy the KSampler node (puts data-metadata in clipboard)
+      const ksamplerNodes =
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      await ksamplerNodes[0].copy()
+
+      // Select the LoadImage node
+      const loadImageNodes =
+        await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+      await loadImageNodes[0].click('title')
+
+      // Simulate pasting when clipboard has stale node metadata (text/html
+      // with data-metadata) but no image file items. This replicates the bug
+      // scenario: user copied a node, then copied a web image (which replaces
+      // clipboard files but may leave stale text/html with node metadata).
+      await comfyPage.page.evaluate(() => {
+        const nodeData = { nodes: [{ type: 'KSampler', id: 99 }] }
+        const base64 = btoa(JSON.stringify(nodeData))
+        const html =
+          '<meta charset="utf-8"><div><span data-metadata="' +
+          base64 +
+          '"></span></div><span style="white-space:pre-wrap;">Text</span>'
+
+        const dataTransfer = new DataTransfer()
+        dataTransfer.setData('text/html', html)
+
+        const event = new ClipboardEvent('paste', {
+          clipboardData: dataTransfer,
+          bubbles: true,
+          cancelable: true
+        })
+        document.dispatchEvent(event)
+      })
+
+      await comfyPage.nextFrame()
+
+      // Node count should remain the same — stale node metadata should NOT
+      // be deserialized when a media node is selected.
+      const finalCount = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(finalCount).toBe(initialCount)
+    })
+  }
+)

browser_tests/tests/vueNodes/widgets/advancedWidgets.spec.ts

@@ -0,0 +1,102 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+test.describe('Advanced Widget Visibility', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.settings.setSetting(
+      'Comfy.Node.AlwaysShowAdvancedWidgets',
+      false
+    )
+
+    // Add a ModelSamplingFlux node which has both advanced (max_shift,
+    // base_shift) and non-advanced (width, height) widgets.
+    await comfyPage.page.evaluate(() => {
+      const node = window.LiteGraph!.createNode('ModelSamplingFlux')!
+      node.pos = [500, 200]
+      window.app!.graph.add(node)
+    })
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  function getNode(
+    comfyPage: Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
+  ) {
+    return comfyPage.vueNodes.getNodeByTitle('ModelSamplingFlux')
+  }
+
+  function getWidgets(
+    comfyPage: Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
+  ) {
+    return getNode(comfyPage).locator('.lg-node-widget')
+  }
+
+  test('should hide advanced widgets by default', async ({ comfyPage }) => {
+    const node = getNode(comfyPage)
+    const widgets = getWidgets(comfyPage)
+
+    // Non-advanced widgets (width, height) should be visible
+    await expect(widgets).toHaveCount(2)
+    await expect(node.getByLabel('width', { exact: true })).toBeVisible()
+    await expect(node.getByLabel('height', { exact: true })).toBeVisible()
+
+    // Advanced widgets should not be rendered
+    await expect(
+      node.getByLabel('max_shift', { exact: true })
+    ).not.toBeVisible()
+    await expect(
+      node.getByLabel('base_shift', { exact: true })
+    ).not.toBeVisible()
+
+    // "Show advanced inputs" button should be present
+    await expect(node.getByText('Show advanced inputs')).toBeVisible()
+  })
+
+  test('should show advanced widgets when per-node toggle is clicked', async ({
+    comfyPage
+  }) => {
+    const node = getNode(comfyPage)
+    const widgets = getWidgets(comfyPage)
+
+    await expect(widgets).toHaveCount(2)
+
+    // Click the toggle button to show advanced widgets
+    await node.getByText('Show advanced inputs').click()
+
+    await expect(widgets).toHaveCount(4)
+    await expect(node.getByLabel('max_shift', { exact: true })).toBeVisible()
+    await expect(node.getByLabel('base_shift', { exact: true })).toBeVisible()
+
+    // Button text should change to "Hide advanced inputs"
+    await expect(node.getByText('Hide advanced inputs')).toBeVisible()
+
+    // Click again to hide
+    await node.getByText('Hide advanced inputs').click()
+    await expect(widgets).toHaveCount(2)
+  })
+
+  test('should show advanced widgets when global setting is enabled', async ({
+    comfyPage
+  }) => {
+    const node = getNode(comfyPage)
+    const widgets = getWidgets(comfyPage)
+
+    await expect(widgets).toHaveCount(2)
+
+    // Enable the global setting
+    await comfyPage.settings.setSetting(
+      'Comfy.Node.AlwaysShowAdvancedWidgets',
+      true
+    )
+
+    // All 4 widgets should now be visible
+    await expect(widgets).toHaveCount(4)
+    await expect(node.getByLabel('max_shift', { exact: true })).toBeVisible()
+    await expect(node.getByLabel('base_shift', { exact: true })).toBeVisible()
+
+    // The toggle button should not be shown when global setting is active
+    await expect(node.getByText('Show advanced inputs')).not.toBeVisible()
+  })
+})

docs/release-process.md

@@ -1,62 +0,0 @@
-# Release Process
-
-## Bump Types
-
-All releases use `release-version-bump.yaml`. Effects differ by bump type:
-
-| Bump       | Target     | Creates branches?                     | GitHub release               |
-| ---------- | ---------- | ------------------------------------- | ---------------------------- |
-| Minor      | `main`     | `core/` + `cloud/` for previous minor | Published, "latest"          |
-| Patch      | `main`     | No                                    | Published, "latest"          |
-| Patch      | `core/X.Y` | No                                    | **Draft** (uncheck "latest") |
-| Prerelease | any        | No                                    | Draft + prerelease           |
-
-**Minor bump** (e.g. 1.41→1.42): freezes the previous minor into `core/1.41`
-and `cloud/1.41`, branched from the commit _before_ the bump. Nightly patch
-bumps on `main` are convenience snapshots — no branches created.
-
-**Patch on `core/X.Y`**: publishes a hotfix draft release. Must not be marked
-"latest" so `main` stays current.
-
-### Dual-homed commits
-
-When a minor bump happens, unreleased commits appear in both places:
-
-```
-v1.40.1 ── A ── B ── C ── [bump to 1.41.0]
-                │
-                └── core/1.40
-```
-
-A, B, C become v1.41.0 on `main` AND sit on `core/1.40` (where they could
-later ship as v1.40.2). Same commits, no divergence — the branch just prevents
-1.41+ features from mixing in so ComfyUI can stay on 1.40.x.
-
-## Backporting
-
-1. Add `needs-backport` + version label to the merged PR
-2. `pr-backport.yaml` cherry-picks and creates a backport PR
-3. Conflicts produce a comment with details and an agent prompt
-
-## Publishing
-
-Merged PRs with the `Release` label trigger `release-draft-create.yaml`,
-publishing to GitHub Releases (`dist.zip`), PyPI (`comfyui-frontend-package`),
-and npm (`@comfyorg/comfyui-frontend-types`).
-
-## Bi-weekly ComfyUI Integration
-
-`release-biweekly-comfyui.yaml` runs every other Monday — if the next `core/`
-branch has unreleased commits, it triggers a patch bump and drafts a PR to
-`Comfy-Org/ComfyUI` updating `requirements.txt`.
-
-## Workflows
-
-| Workflow                        | Purpose                                          |
-| ------------------------------- | ------------------------------------------------ |
-| `release-version-bump.yaml`     | Bump version, create Release PR                  |
-| `release-draft-create.yaml`     | Build + publish to GitHub/PyPI/npm               |
-| `release-branch-create.yaml`    | Create `core/` + `cloud/` branches (minor/major) |
-| `release-biweekly-comfyui.yaml` | Auto-patch + ComfyUI requirements PR             |
-| `pr-backport.yaml`              | Cherry-pick fixes to stable branches             |
-| `cloud-backport-tag.yaml`       | Tag cloud branch merges                          |

eslint.config.ts

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

global.d.ts

@@ -1,4 +1,5 @@
 declare const __COMFYUI_FRONTEND_VERSION__: string
+declare const __COMFYUI_FRONTEND_COMMIT__: string
 declare const __SENTRY_ENABLED__: boolean
 declare const __SENTRY_DSN__: string
 declare const __ALGOLIA_APP_ID__: string
@@ -35,6 +36,7 @@ interface Window {
     mixpanel_token?: string
     posthog_project_token?: string
     posthog_api_host?: string
+    posthog_config?: Record<string, unknown>
     require_whitelist?: boolean
     subscription_required?: boolean
     max_upload_size?: number

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.42.2",
+  "version": "1.41.13",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -195,9 +195,6 @@
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "catalog:"
   },
-  "engines": {
-    "node": "24.x"
-  },
   "pnpm": {
     "overrides": {
       "vite": "catalog:"

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

@@ -15,7 +15,7 @@
 @plugin "./lucideStrokePlugin.js";
 
 /* Safelist dynamic comfy icons for node library folders */
-@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow}]");
+@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow}]");
 
 /* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */
 @source inline("icon-[comfy--{save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,subgraph-blueprint-canny-to-video-ltx-2-0,subgraph-blueprint-pose-to-video-ltx-2-0,preview-image,image-and-mask-preview,layer-mask-mask-preview,mask-preview,image-preview-from-latent}]");

packages/design-system/src/icons/elevenlabs.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ElevenLabs</title><path d="M5 0h5v24H5V0zM14 0h5v24h-5V0z"></path></svg>

packages/design-system/src/icons/reve.svg

@@ -0,0 +1,10 @@
+<svg width="182" height="148" viewBox="0 0 182 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2902_38097)">
+<path d="M116 16H110V0H116V16ZM105 96H99V132H105V96ZM105 24H99V36H105V24ZM149 96H143V128H149V96ZM160 100H154V116H160V100ZM105 52H99V76H105V52ZM116 40H110V84H116V40ZM160 16H154V72H160V16ZM171 20H165V52H171V20ZM182 24H176V36H182V24ZM94 44H88V112H94V44ZM94 44H88V112H94V44ZM127 32H121V48H127V32ZM138 24H132V40H138V24ZM149 16H143V48H149V16ZM127 60H121V84H127V60ZM138 68H132V84H138V68ZM149 60H143V84H149V60ZM116 92H110V112H116V92ZM127 92H121V104H127V92ZM138 92H132V112H138V92ZM116 120H110V144H116V120ZM127 128H121V148H127V128ZM138 120H132V140H138V120ZM72 0H66V16H72V0ZM83 96H77V132H83V96ZM83 24H77V36H83V24ZM39 96H33V128H39V96ZM28 100H22V116H28V100ZM83 52H77V76H83V52ZM72 40H66V84H72V40ZM28 16H22V72H28V16ZM17 20H11V52H17V20ZM6 24H0V36H6V24ZM61 32H55V48H61V32ZM50 24H44V40H50V24ZM39 16H33V48H39V16ZM61 60H55V84H61V60ZM50 68H44V84H50V68ZM39 60H33V84H39V60ZM72 92H66V112H72V92ZM61 92H55V104H61V92ZM50 92H44V112H50V92ZM72 120H66V144H72V120ZM61 128H55V148H61V128ZM50 120H44V140H50V120Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_2902_38097">
+<rect width="182" height="148" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/TopMenuSection.vue

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

src/components/actionbar/ComfyActionbar.vue

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

src/components/builder/useAppSetDefaultView.ts

@@ -1,6 +1,7 @@
 import { computed } from 'vue'
 
 import { useAppMode } from '@/composables/useAppMode'
+import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
@@ -42,6 +43,9 @@ export function useAppSetDefaultView() {
     const extra = (app.rootGraph.extra ??= {})
     extra.linearMode = openAsApp
     workflow.changeTracker?.checkState()
+    useTelemetry()?.trackDefaultViewSet({
+      default_view: openAsApp ? 'app' : 'graph'
+    })
     closeDialog()
     showAppliedDialog(openAsApp)
   }
@@ -54,6 +58,7 @@ export function useAppSetDefaultView() {
         appliedAsApp,
         onViewApp: () => {
           closeAppliedDialog()
+          useTelemetry()?.trackEnterLinear({ source: 'app_builder' })
           setMode('app')
         },
         onExitToWorkflow: () => {

src/components/common/DropdownItem.vue

@@ -54,11 +54,12 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
     :disabled="toValue(item.disabled) ?? !item.command"
     @select="item.command?.({ originalEvent: $event, item })"
   >
-    <i class="size-5" :class="item.icon" />
-    {{ item.label }}
+    <i class="size-5 shrink-0" :class="item.icon" />
+    <div class="mr-auto truncate" v-text="item.label" />
+    <i v-if="item.checked" class="icon-[lucide--check] shrink-0" />
     <div
-      v-if="item.new"
-      class="ml-auto flex items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
+      v-else-if="item.new"
+      class="flex shrink-0 items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
       v-text="t('contextMenu.new')"
     />
   </DropdownMenuItem>

src/components/common/DropdownMenu.vue

@@ -27,7 +27,7 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
 
 const itemClass = computed(() =>
   cn(
-    'm-1 flex cursor-pointer gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
+    'm-1 flex cursor-pointer items-center-safe gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
     itemProp
   )
 )

src/components/common/ScrubableNumberInput.vue

@@ -33,19 +33,20 @@
         spellcheck="false"
         @blur="handleBlur"
         @keyup.enter="handleBlur"
-        @dragstart.prevent
+        @keydown.up.prevent="updateValueBy(step)"
+        @keydown.down.prevent="updateValueBy(-step)"
+        @keydown.page-up.prevent="updateValueBy(10 * step)"
+        @keydown.page-down.prevent="updateValueBy(-10 * step)"
       />
       <div
+        ref="swipeElement"
         :class="
           cn(
-            'absolute inset-0 z-10 cursor-ew-resize',
+            'absolute inset-0 z-10 cursor-ew-resize touch-pan-y',
             textEdit && 'pointer-events-none hidden'
           )
         "
-        @pointerdown="handlePointerDown"
-        @pointermove="handlePointerMove"
         @pointerup="handlePointerUp"
-        @pointercancel="resetDrag"
       />
     </div>
     <slot />
@@ -65,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, usePointerSwipe, whenever } from '@vueuse/core'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -73,8 +74,8 @@ import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
-  min,
-  max,
+  min = -Number.MAX_VALUE,
+  max = Number.MAX_VALUE,
   step = 1,
   disabled = false,
   hideButtons = false,
@@ -96,6 +97,7 @@ const modelValue = defineModel<number>({ default: 0 })
 
 const container = useTemplateRef<HTMLDivElement>('container')
 const inputField = useTemplateRef<HTMLInputElement>('inputField')
+const swipeElement = useTemplateRef('swipeElement')
 const textEdit = ref(false)
 
 onClickOutside(container, () => {
@@ -103,21 +105,11 @@ onClickOutside(container, () => {
 })
 
 function clamp(value: number): number {
-  const lo = min ?? -Infinity
-  const hi = max ?? Infinity
-  return Math.min(hi, Math.max(lo, value))
+  return Math.min(max, Math.max(min, value))
 }
 
-const canDecrement = computed(
-  () => modelValue.value > (min ?? -Infinity) && !disabled
-)
-const canIncrement = computed(
-  () => modelValue.value < (max ?? Infinity) && !disabled
-)
-
-const dragging = ref(false)
-const dragDelta = ref(0)
-const hasDragged = ref(false)
+const canDecrement = computed(() => modelValue.value > min && !disabled)
+const canIncrement = computed(() => modelValue.value < max && !disabled)
 
 function handleBlur(e: Event) {
   const target = e.target as HTMLInputElement
@@ -135,41 +127,27 @@ function handleBlur(e: Event) {
   textEdit.value = false
 }
 
-function handlePointerDown(e: PointerEvent) {
-  if (e.button !== 0) return
-  if (disabled) return
-  const target = e.target as HTMLElement
-  target.setPointerCapture(e.pointerId)
-  dragging.value = true
-  dragDelta.value = 0
-  hasDragged.value = false
-}
-
-function handlePointerMove(e: PointerEvent) {
-  if (!dragging.value) return
-  dragDelta.value += e.movementX
-  const steps = (dragDelta.value / 10) | 0
-  if (steps === 0) return
-  hasDragged.value = true
-  const unclipped = modelValue.value + steps * step
-  dragDelta.value %= 10
-  modelValue.value = clamp(unclipped)
-}
-
+let dragDelta = 0
 function handlePointerUp() {
-  if (!dragging.value) return
+  if (isSwiping.value) return
 
-  if (!hasDragged.value) {
-    textEdit.value = true
-    inputField.value?.focus()
-    inputField.value?.select()
-  }
-
-  resetDrag()
+  textEdit.value = true
+  inputField.value?.focus()
+  inputField.value?.select()
 }
 
-function resetDrag() {
-  dragging.value = false
-  dragDelta.value = 0
+const { distanceX, isSwiping } = usePointerSwipe(swipeElement, {
+  onSwipeEnd: () => (dragDelta = 0)
+})
+
+whenever(distanceX, () => {
+  if (disabled) return
+  const delta = ((distanceX.value - dragDelta) / 10) | 0
+  dragDelta += delta * 10
+  modelValue.value = clamp(modelValue.value - delta * step)
+})
+
+function updateValueBy(delta: number) {
+  modelValue.value = Math.min(max, Math.max(min, modelValue.value + delta))
 }
 </script>

src/components/common/SearchBox.stories.ts

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+interface GenericMeta<C> extends Omit<Meta<C>, 'component'> {
+  component: Omit<ComponentExposed<C>, 'focus'>
+}
+
+const meta: GenericMeta<typeof SearchBox> = {
+  title: 'Components/Input/SearchBox',
+  component: SearchBox,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text'
+    },
+    placeholder: {
+      control: 'text'
+    },
+    showBorder: {
+      control: 'boolean',
+      description: 'Toggle border prop'
+    },
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+      description: 'Size variant of the search box'
+    },
+    'onUpdate:modelValue': { action: 'update:modelValue' },
+    onSearch: { action: 'search' }
+  },
+  args: {
+    modelValue: '',
+    placeholder: 'Search...',
+    showBorder: false,
+    size: 'md'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { SearchBox },
+    setup() {
+      const searchText = ref('')
+      return { searchText, args }
+    },
+    template: `
+      <div style="max-width: 320px;">
+        <SearchBox v-bind="args" v-model="searchText" />
+      </div>
+    `
+  })
+}
+
+export const WithBorder: Story = {
+  ...Default,
+  args: {
+    showBorder: true
+  }
+}
+
+export const NoBorder: Story = {
+  ...Default,
+  args: {
+    showBorder: false
+  }
+}
+
+export const MediumSize: Story = {
+  ...Default,
+  args: {
+    size: 'md',
+    showBorder: false
+  }
+}
+
+export const LargeSize: Story = {
+  ...Default,
+  args: {
+    size: 'lg',
+    showBorder: false
+  }
+}
+
+export const LargeSizeWithBorder: Story = {
+  ...Default,
+  args: {
+    size: 'lg',
+    showBorder: true
+  }
+}

src/components/common/SearchBox.test.ts

@@ -0,0 +1,193 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      templateWidgets: {
+        sort: {
+          searchPlaceholder: 'Search...'
+        }
+      }
+    }
+  }
+})
+
+describe('SearchBox', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  const createWrapper = (props = {}) => {
+    return mount(SearchBox, {
+      props: {
+        modelValue: '',
+        ...props
+      },
+      global: {
+        plugins: [i18n]
+      }
+    })
+  }
+
+  describe('debounced search functionality', () => {
+    it('should debounce search input by 300ms', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Type search query
+      await input.setValue('test')
+
+      // Model should not update immediately
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance timers by 299ms (just before debounce delay)
+      await vi.advanceTimersByTimeAsync(299)
+      await nextTick()
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance timers by 1ms more (reaching 300ms)
+      await vi.advanceTimersByTimeAsync(1)
+      await nextTick()
+
+      // Model should now be updated
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test'])
+    })
+
+    it('should reset debounce timer on each keystroke', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Type first character
+      await input.setValue('t')
+      vi.advanceTimersByTime(200)
+      await nextTick()
+
+      // Type second character (should reset timer)
+      await input.setValue('te')
+      vi.advanceTimersByTime(200)
+      await nextTick()
+
+      // Type third character (should reset timer again)
+      await input.setValue('tes')
+      await vi.advanceTimersByTimeAsync(200)
+      await nextTick()
+
+      // Should not have emitted yet (only 200ms passed since last keystroke)
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance final 100ms to reach 300ms
+      await vi.advanceTimersByTimeAsync(100)
+      await nextTick()
+
+      // Should now emit with final value
+      expect(wrapper.emitted('search')).toBeTruthy()
+      expect(wrapper.emitted('search')?.[0]).toEqual(['tes', []])
+    })
+
+    it('should only emit final value after rapid typing', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Simulate rapid typing
+      const searchTerms = ['s', 'se', 'sea', 'sear', 'searc', 'search']
+      for (const term of searchTerms) {
+        await input.setValue(term)
+        await vi.advanceTimersByTimeAsync(50) // Less than debounce delay
+      }
+      await nextTick()
+
+      // Should not have emitted yet
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Complete the debounce delay
+      await vi.advanceTimersByTimeAsync(350)
+      await nextTick()
+
+      // Should emit only once with final value
+      expect(wrapper.emitted('search')).toHaveLength(1)
+      expect(wrapper.emitted('search')?.[0]).toEqual(['search', []])
+    })
+
+    describe('bidirectional model sync', () => {
+      it('should sync external model changes to internal state', async () => {
+        const wrapper = createWrapper({ modelValue: 'initial' })
+        const input = wrapper.find('input')
+
+        expect(input.element.value).toBe('initial')
+
+        // Update model externally
+        await wrapper.setProps({ modelValue: 'external update' })
+        await nextTick()
+
+        // Internal state should sync
+        expect(input.element.value).toBe('external update')
+      })
+    })
+
+    describe('placeholder', () => {
+      it('should use custom placeholder when provided', () => {
+        const wrapper = createWrapper({ placeholder: 'Custom search...' })
+        const input = wrapper.find('input')
+
+        expect(input.attributes('placeholder')).toBe('Custom search...')
+        expect(input.attributes('aria-label')).toBe('Custom search...')
+      })
+
+      it('should use default placeholder when not provided', () => {
+        const wrapper = createWrapper()
+        const input = wrapper.find('input')
+
+        expect(input.attributes('placeholder')).toBe('Search...')
+        expect(input.attributes('aria-label')).toBe('Search...')
+      })
+    })
+
+    describe('autofocus', () => {
+      it('should focus input when autofocus is true', async () => {
+        const wrapper = createWrapper({ autofocus: true })
+        await nextTick()
+
+        const input = wrapper.find('input')
+        const inputElement = input.element as HTMLInputElement
+
+        // Note: In JSDOM, focus() doesn't actually set document.activeElement
+        // We can only verify that the focus method exists and doesn't throw
+        expect(inputElement.focus).toBeDefined()
+      })
+
+      it('should not autofocus when autofocus is false', () => {
+        const wrapper = createWrapper({ autofocus: false })
+        const input = wrapper.find('input')
+
+        expect(document.activeElement).not.toBe(input.element)
+      })
+    })
+
+    describe('click to focus', () => {
+      it('should focus input when wrapper is clicked', async () => {
+        const wrapper = createWrapper()
+        const wrapperDiv = wrapper.find('[class*="flex"]')
+
+        await wrapperDiv.trigger('click')
+        await nextTick()
+
+        // Input should receive focus
+        const input = wrapper.find('input').element as HTMLInputElement
+        expect(input.focus).toBeDefined()
+      })
+    })
+  })
+})

src/components/common/SearchBox.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    :class="
+      cn(
+        'relative flex w-full cursor-text items-center gap-2 bg-comfy-input text-comfy-input-foreground',
+        customClass,
+        wrapperStyle
+      )
+    "
+  >
+    <InputText
+      ref="inputRef"
+      v-model="modelValue"
+      :placeholder
+      :autofocus
+      unstyled
+      :class="
+        cn(
+          'absolute inset-0 size-full border-none bg-transparent text-sm outline-none',
+          isLarge ? 'pl-11' : 'pl-8'
+        )
+      "
+      :aria-label="placeholder"
+    />
+    <Button
+      v-if="filterIcon"
+      size="icon"
+      variant="textonly"
+      class="filter-button absolute inset-y-0 right-0 m-0 p-0"
+      @click="$emit('showFilter', $event)"
+    >
+      <i :class="filterIcon" />
+    </Button>
+    <InputIcon v-if="!modelValue" :class="icon" />
+    <Button
+      v-if="modelValue"
+      :class="cn('clear-button absolute', isLarge ? 'left-2' : 'left-0')"
+      variant="textonly"
+      size="icon"
+      @click="modelValue = ''"
+    >
+      <i class="icon-[lucide--x] size-4" />
+    </Button>
+  </div>
+  <div v-if="filters?.length" class="search-filters flex flex-wrap gap-2 pt-2">
+    <SearchFilterChip
+      v-for="filter in filters"
+      :key="filter.id"
+      :text="filter.text"
+      :badge="filter.badge"
+      :badge-class="filter.badgeClass"
+      @remove="$emit('removeFilter', filter)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" generic="TFilter extends SearchFilter">
+import { cn } from '@comfyorg/tailwind-utils'
+import { watchDebounced } from '@vueuse/core'
+import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
+import { computed, ref } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+
+import type { SearchFilter } from './SearchFilterChip.vue'
+import SearchFilterChip from './SearchFilterChip.vue'
+
+const {
+  placeholder = 'Search...',
+  icon = 'pi pi-search',
+  debounceTime = 300,
+  filterIcon,
+  filters = [],
+  autofocus = false,
+  showBorder = false,
+  size = 'md',
+  class: customClass
+} = defineProps<{
+  placeholder?: string
+  icon?: string
+  debounceTime?: number
+  filterIcon?: string
+  filters?: TFilter[]
+  autofocus?: boolean
+  showBorder?: boolean
+  size?: 'md' | 'lg'
+  class?: string
+}>()
+
+const isLarge = computed(() => size === 'lg')
+
+const emit = defineEmits<{
+  (e: 'search', value: string, filters: TFilter[]): void
+  (e: 'showFilter', event: Event): void
+  (e: 'removeFilter', filter: TFilter): void
+}>()
+
+const modelValue = defineModel<string>({ required: true })
+
+const inputRef = ref()
+
+defineExpose({
+  focus: () => {
+    inputRef.value?.$el?.focus()
+  }
+})
+
+watchDebounced(
+  modelValue,
+  (value: string) => {
+    emit('search', value, filters)
+  },
+  { debounce: debounceTime }
+)
+
+const wrapperStyle = computed(() => {
+  if (showBorder) {
+    return cn(
+      'box-border rounded-sm border border-solid border-border-default p-2',
+      isLarge.value ? 'h-10' : 'h-8'
+    )
+  }
+
+  // Size-specific classes matching button sizes for consistency
+  const sizeClasses = {
+    md: 'h-8 px-2 py-1.5', // Matches button sm size
+    lg: 'h-10 px-4 py-2' // Matches button md size
+  }[size]
+
+  return cn('rounded-lg', sizeClasses)
+})
+</script>
+
+<style scoped>
+:deep(.p-inputtext) {
+  --p-form-field-padding-x: 0.625rem;
+}
+</style>

src/components/common/SearchBoxV2.test.ts

@@ -0,0 +1,90 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SearchBoxV2 from './SearchBoxV2.vue'
+
+vi.mock('@vueuse/core', () => ({
+  watchDebounced: vi.fn(() => vi.fn())
+}))
+
+describe('SearchBoxV2', () => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        g: {
+          clear: 'Clear',
+          searchPlaceholder: 'Search...'
+        }
+      }
+    }
+  })
+
+  function mountComponent(props = {}) {
+    return mount(SearchBoxV2, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          ComboboxRoot: {
+            template: '<div><slot /></div>'
+          },
+          ComboboxAnchor: {
+            template: '<div><slot /></div>'
+          },
+          ComboboxInput: {
+            template:
+              '<input :placeholder="placeholder" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+            props: ['placeholder', 'modelValue', 'autoFocus']
+          }
+        }
+      },
+      props: {
+        modelValue: '',
+        ...props
+      }
+    })
+  }
+
+  it('uses i18n placeholder when no placeholder prop provided', () => {
+    const wrapper = mountComponent()
+    const input = wrapper.find('input')
+    expect(input.attributes('placeholder')).toBe('Search...')
+  })
+
+  it('uses custom placeholder when provided', () => {
+    const wrapper = mountComponent({
+      placeholder: 'Custom placeholder'
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('placeholder')).toBe('Custom placeholder')
+  })
+
+  it('shows search icon when search term is empty', () => {
+    const wrapper = mountComponent({ modelValue: '' })
+    expect(wrapper.find('i.icon-\\[lucide--search\\]').exists()).toBe(true)
+  })
+
+  it('shows clear button when search term is not empty', () => {
+    const wrapper = mountComponent({ modelValue: 'test' })
+    expect(wrapper.find('button').exists()).toBe(true)
+  })
+
+  it('clears search term when clear button is clicked', async () => {
+    const wrapper = mountComponent({ modelValue: 'test' })
+    const clearButton = wrapper.find('button')
+    await clearButton.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
+  })
+
+  it('applies large size classes when size is lg', () => {
+    const wrapper = mountComponent({ size: 'lg' })
+    expect(wrapper.html()).toContain('size-5')
+  })
+
+  it('applies medium size classes when size is md', () => {
+    const wrapper = mountComponent({ size: 'md' })
+    expect(wrapper.html()).toContain('size-4')
+  })
+})

src/components/common/SearchBoxV2.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="flex flex-auto flex-col gap-2">
+    <ComboboxRoot :ignore-filter="true" :open="false">
+      <ComboboxAnchor
+        :class="
+          cn(
+            'relative flex w-full cursor-text items-center',
+            'rounded-lg bg-comfy-input text-comfy-input-foreground',
+            showBorder &&
+              'box-border border border-solid border-border-default',
+            sizeClasses,
+            className
+          )
+        "
+      >
+        <i
+          v-if="!searchTerm"
+          :class="cn('pointer-events-none absolute left-4', icon, iconClass)"
+        />
+        <Button
+          v-else
+          class="absolute left-2"
+          variant="textonly"
+          size="icon"
+          :aria-label="$t('g.clear')"
+          @click="clearSearch"
+        >
+          <i class="icon-[lucide--x] size-4" />
+        </Button>
+
+        <ComboboxInput
+          ref="inputRef"
+          v-model="searchTerm"
+          :class="
+            cn(
+              'size-full border-none bg-transparent text-sm outline-none',
+              inputPadding
+            )
+          "
+          :placeholder="placeholderText"
+          :auto-focus="autofocus"
+        />
+      </ComboboxAnchor>
+    </ComboboxRoot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+import { watchDebounced } from '@vueuse/core'
+import { ComboboxAnchor, ComboboxInput, ComboboxRoot } from 'reka-ui'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+
+const { t } = useI18n()
+
+const {
+  placeholder,
+  icon = 'icon-[lucide--search]',
+  debounceTime = 300,
+  autofocus = false,
+  showBorder = false,
+  size = 'md',
+  class: className
+} = defineProps<{
+  placeholder?: string
+  icon?: string
+  debounceTime?: number
+  autofocus?: boolean
+  showBorder?: boolean
+  size?: 'md' | 'lg'
+  class?: string
+}>()
+
+const emit = defineEmits<{
+  search: [value: string]
+}>()
+
+const searchTerm = defineModel<string>({ required: true })
+
+const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
+
+defineExpose({
+  focus: () => {
+    inputRef.value?.$el?.focus()
+  }
+})
+
+const isLarge = computed(() => size === 'lg')
+const placeholderText = computed(
+  () => placeholder ?? t('g.searchPlaceholder', { subject: '' })
+)
+
+const sizeClasses = computed(() => {
+  if (showBorder) {
+    return isLarge.value ? 'h-10 p-2' : 'h-8 p-2'
+  }
+  return isLarge.value ? 'h-12 px-4 py-2' : 'h-10 px-4 py-2'
+})
+
+const iconClass = computed(() => (isLarge.value ? 'size-5' : 'size-4'))
+const inputPadding = computed(() => (isLarge.value ? 'pl-8' : 'pl-6'))
+
+function clearSearch() {
+  searchTerm.value = ''
+}
+
+watchDebounced(
+  searchTerm,
+  (value: string) => {
+    emit('search', value)
+  },
+  { debounce: debounceTime }
+)
+</script>

src/components/common/SystemStatsPanel.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="system-stats">
     <div class="mb-6">
-      <h2 class="mb-4 text-2xl font-semibold">
-        {{ $t('g.systemInfo') }}
-      </h2>
+      <div class="mb-4 flex items-center gap-2">
+        <h2 class="text-2xl font-semibold">
+          {{ $t('g.systemInfo') }}
+        </h2>
+        <Button variant="secondary" @click="copySystemInfo">
+          <i class="pi pi-copy" />
+          {{ $t('g.copySystemInfo') }}
+        </Button>
+      </div>
       <div class="grid grid-cols-2 gap-2">
         <template v-for="col in systemColumns" :key="col.field">
           <div :class="cn('font-medium', isOutdated(col) && 'text-danger-100')">
@@ -46,15 +52,21 @@ import TabView from 'primevue/tabview'
 import { computed } from 'vue'
 
 import DeviceInfo from '@/components/common/DeviceInfo.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { isCloud } from '@/platform/distribution/types'
 import type { SystemStats } from '@/schemas/apiSchema'
 import { formatCommitHash, formatSize } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'
 
+const frontendCommit = __COMFYUI_FRONTEND_COMMIT__
+
 const props = defineProps<{
   stats: SystemStats
 }>()
 
+const { copyToClipboard } = useCopyToClipboard()
+
 const systemInfo = computed(() => ({
   ...props.stats.system,
   argv: props.stats.system.argv.join(' ')
@@ -67,6 +79,7 @@ type SystemInfoKey = keyof SystemStats['system']
 type ColumnDef = {
   field: SystemInfoKey
   header: string
+  getValue?: () => string
   format?: (value: string) => string
   formatNumber?: (value: number) => string
 }
@@ -94,6 +107,7 @@ const cloudColumns: ColumnDef[] = [
   {
     field: 'comfyui_frontend_version',
     header: 'Frontend Version',
+    getValue: () => frontendCommit,
     format: formatCommitHash
   },
   { field: 'workflow_templates_version', header: 'Templates Version' }
@@ -108,8 +122,10 @@ function isOutdated(column: ColumnDef): boolean {
   return !!installed && !!required && installed !== required
 }
 
-const getDisplayValue = (column: ColumnDef) => {
-  const value = systemInfo.value[column.field]
+function getDisplayValue(column: ColumnDef) {
+  const value = column.getValue
+    ? column.getValue()
+    : systemInfo.value[column.field]
   if (column.formatNumber && typeof value === 'number') {
     return column.formatNumber(value)
   }
@@ -118,4 +134,33 @@ const getDisplayValue = (column: ColumnDef) => {
   }
   return value
 }
+
+function formatSystemInfoText(): string {
+  const lines: string[] = ['## System Info']
+
+  for (const col of systemColumns.value) {
+    const display = getDisplayValue(col)
+    if (display !== undefined && display !== '') {
+      lines.push(`${col.header}: ${display}`)
+    }
+  }
+
+  if (hasDevices.value) {
+    lines.push('')
+    lines.push('## Devices')
+    for (const device of props.stats.devices) {
+      lines.push(`- ${device.name} (${device.type})`)
+      lines.push(`  VRAM Total: ${formatSize(device.vram_total)}`)
+      lines.push(`  VRAM Free: ${formatSize(device.vram_free)}`)
+      lines.push(`  Torch VRAM Total: ${formatSize(device.torch_vram_total)}`)
+      lines.push(`  Torch VRAM Free: ${formatSize(device.torch_vram_free)}`)
+    }
+  }
+
+  return lines.join('\n')
+}
+
+function copySystemInfo() {
+  copyToClipboard(formatSystemInfoText())
+}
 </script>

src/components/common/TreeExplorerV2.vue

@@ -8,7 +8,7 @@
         :get-children="
           (item) => (item.children?.length ? item.children : undefined)
         "
-        class="m-0 p-0 pb-6"
+        class="m-0 min-w-0 p-0 pb-6"
       >
         <TreeVirtualizer
           v-slot="{ item }"

src/components/common/TreeExplorerV2Node.vue

@@ -99,7 +99,7 @@ import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { cn } from '@/utils/tailwindUtil'
 
 const ROW_CLASS =
-  'group/tree-node flex cursor-pointer select-none items-center gap-3 overflow-hidden py-2 outline-none hover:bg-comfy-input mx-2 rounded'
+  'group/tree-node flex w-full min-w-0 cursor-pointer select-none items-center gap-3 overflow-hidden py-2 outline-none hover:bg-comfy-input mx-2 rounded'
 
 const { item } = defineProps<{
   item: FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>>

src/components/common/VirtualGrid.test.ts

@@ -155,93 +155,6 @@ describe('VirtualGrid', () => {
     wrapper.unmount()
   })
 
-  it('emits approach-end for single-column list when scrolled near bottom', async () => {
-    const items = createItems(50)
-    mockedWidth.value = 400
-    mockedHeight.value = 600
-    mockedScrollY.value = 0
-
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: {
-          display: 'grid',
-          gridTemplateColumns: 'minmax(0, 1fr)'
-        },
-        defaultItemHeight: 48,
-        defaultItemWidth: 200,
-        maxColumns: 1,
-        bufferRows: 1
-      },
-      slots: {
-        item: `<template #item="{ item }">
-          <div class="test-item">{{ item.name }}</div>
-        </template>`
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
-
-    // Scroll near the end: 50 items * 48px = 2400px total
-    // viewRows = ceil(600/48) = 13, buffer = 1
-    // Need toCol >= items.length - cols*bufferRows = 50 - 1 = 49
-    // toCol = (offsetRows + bufferRows + viewRows) * cols
-    // offsetRows = floor(scrollY / 48)
-    // Need (offsetRows + 1 + 13) * 1 >= 49 → offsetRows >= 35
-    // scrollY = 35 * 48 = 1680
-    mockedScrollY.value = 1680
-    await nextTick()
-
-    expect(wrapper.emitted('approach-end')).toBeDefined()
-
-    wrapper.unmount()
-  })
-
-  it('does not emit approach-end without maxColumns in single-column layout', async () => {
-    // Demonstrates the bug: without maxColumns=1, cols is calculated
-    // from width/itemWidth (400/200 = 2), causing incorrect row math
-    const items = createItems(50)
-    mockedWidth.value = 400
-    mockedHeight.value = 600
-    mockedScrollY.value = 0
-
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: {
-          display: 'grid',
-          gridTemplateColumns: 'minmax(0, 1fr)'
-        },
-        defaultItemHeight: 48,
-        defaultItemWidth: 200,
-        // No maxColumns — cols will be floor(400/200) = 2
-        bufferRows: 1
-      },
-      slots: {
-        item: `<template #item="{ item }">
-          <div class="test-item">{{ item.name }}</div>
-        </template>`
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    // Same scroll position as the passing test
-    mockedScrollY.value = 1680
-    await nextTick()
-
-    // With cols=2, toCol = (35+1+13)*2 = 98, which exceeds items.length (50)
-    // remainingCol = 50-98 = -48, hasMoreToRender = false → isNearEnd = false
-    // The approach-end never fires at the correct scroll position
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
-
-    wrapper.unmount()
-  })
-
   it('forces cols to maxColumns when maxColumns is finite', async () => {
     mockedWidth.value = 100
     mockedHeight.value = 200

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -14,10 +14,10 @@
     </template>
 
     <template #header>
-      <SearchInput
+      <SearchBox
         v-model="searchQuery"
         size="lg"
-        class="max-w-96 flex-1"
+        class="max-w-[384px]"
         autofocus
       />
     </template>
@@ -178,7 +178,7 @@
             v-show="isTemplateVisibleOnDistribution(template)"
             :key="template.name"
             ref="cardRefs"
-            size="compact"
+            size="tall"
             variant="ghost"
             rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
@@ -318,6 +318,20 @@
                       </Button>
                     </div>
                   </div>
+                  <div class="flex">
+                    <span
+                      class="text-neutral flex items-center gap-1.5 text-xs font-bold"
+                    >
+                      <template v-if="isAppTemplate(template)">
+                        <i class="icon-[lucide--panels-top-left]" />
+                        {{ $t('builderToolbar.app', 'App') }}
+                      </template>
+                      <template v-else>
+                        <i class="icon-[lucide--workflow]" />
+                        {{ $t('builderToolbar.nodeGraph', 'Node Graph') }}
+                      </template>
+                    </span>
+                  </div>
                 </div>
               </CardBottom>
             </template>
@@ -389,7 +403,7 @@ import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
@@ -483,6 +497,8 @@ const {
 const getEffectiveSourceModule = (template: TemplateInfo) =>
   template.sourceModule || 'default'
 
+const isAppTemplate = (template: TemplateInfo) => template.name.endsWith('.app')
+
 const getBaseThumbnailSrc = (template: TemplateInfo) => {
   const sm = getEffectiveSourceModule(template)
   return getTemplateThumbnailUrl(template, sm, sm === 'default' ? '1' : '')

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

@@ -1,6 +1,6 @@
 <template>
   <div class="keybinding-panel flex flex-col gap-2">
-    <SearchInput
+    <SearchBox
       v-model="filters['global'].value"
       :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
     />
@@ -155,7 +155,7 @@ import { useToast } from 'primevue/usetoast'
 import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { KeyComboImpl } from '@/platform/keybindings/keyCombo'
 import { KeybindingImpl } from '@/platform/keybindings/keybinding'

src/components/graph/GraphCanvas.vue

@@ -535,7 +535,7 @@ onMounted(async () => {
 
   // Restore saved workflow and workflow tabs state
   await workflowPersistence.initializeWorkflow()
-  workflowPersistence.restoreWorkflowTabsState()
+  await workflowPersistence.restoreWorkflowTabsState()
 
   const sharedWorkflowLoadStatus =
     await workflowPersistence.loadSharedWorkflowFromUrlIfPresent()

src/components/input/MultiSelect.vue

@@ -93,12 +93,13 @@
       #header
     >
       <div class="flex flex-col px-2 pt-2 pb-0">
-        <SearchInput
+        <SearchBox
           v-if="showSearchBox"
           v-model="searchQuery"
           :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
-          :placeholder="searchPlaceholder"
-          size="sm"
+          :show-order="true"
+          :show-border="true"
+          :place-holder="searchPlaceholder"
         />
         <div
           v-if="showSelectedCount || showClearButton"
@@ -181,7 +182,7 @@ import MultiSelect from 'primevue/multiselect'
 import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'

src/components/load3d/Load3dViewerContent.vue

@@ -141,7 +141,7 @@ onMounted(async () => {
   if (isStandaloneMode && props.modelUrl) {
     await viewer.initializeStandaloneViewer(containerRef.value, props.modelUrl)
   } else if (props.node) {
-    const source = await useLoad3dService().getLoad3dAsync(props.node)
+    const source = useLoad3dService().getLoad3d(props.node)
     if (source) {
       await viewer.initializeViewer(containerRef.value, source)
     }

src/components/maskeditor/BrushSettingsPanel.vue

@@ -72,12 +72,12 @@
         />
       </div>
       <SliderControl
-        v-model="brushSizeSliderValue"
+        v-model="brushSize"
         class="flex-1"
         label=""
-        :min="0"
-        :max="1"
-        :step="0.001"
+        :min="1"
+        :max="250"
+        :step="1"
       />
     </div>
 
@@ -182,26 +182,6 @@ const brushSize = computed({
   set: (value: number) => store.setBrushSize(value)
 })
 
-const rawSliderValue = ref<number | null>(null)
-
-const brushSizeSliderValue = computed({
-  get: () => {
-    if (rawSliderValue.value !== null) {
-      const cachedSize = Math.round(Math.pow(250, rawSliderValue.value))
-      if (cachedSize === brushSize.value) {
-        return rawSliderValue.value
-      }
-    }
-
-    return Math.log(brushSize.value) / Math.log(250)
-  },
-  set: (value: number) => {
-    rawSliderValue.value = value
-    const size = Math.round(Math.pow(250, value))
-    store.setBrushSize(size)
-  }
-})
-
 const brushOpacity = computed({
   get: () => store.brushSettings.opacity,
   set: (value: number) => store.setBrushOpacity(value)

src/components/queue/job/JobFilterActions.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex min-w-0 items-center gap-2">
-    <SearchInput
+    <SearchBox
       v-if="showSearch"
       :model-value="searchQuery"
       class="min-w-0 flex-1"
@@ -116,7 +116,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { jobSortModes } from '@/composables/queue/useJobList'

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -23,6 +23,7 @@ import { HideLayoutFieldKey } from '@/types/widgetTypes'
 
 import { GetNodeParentGroupKey } from '../shared'
 import WidgetItem from './WidgetItem.vue'
+import { getStableWidgetRenderKey } from '@/core/graph/subgraph/widgetRenderKey'
 
 const {
   label,
@@ -272,7 +273,7 @@ defineExpose({
         <TransitionGroup name="list-scale">
           <WidgetItem
             v-for="{ widget, node } in widgets"
-            :key="`${node.id}-${widget.name}-${widget.type}`"
+            :key="getStableWidgetRenderKey(widget)"
             :widget="widget"
             :node="node"
             :is-draggable="isDraggable"

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -18,8 +18,6 @@
       class="flex-1"
       :items="assetItems"
       :grid-style="listGridStyle"
-      :max-columns="1"
-      :default-item-height="48"
       @approach-end="emit('approach-end')"
     >
       <template #item="{ item }">

src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue

@@ -21,7 +21,7 @@
     </template>
     <template #header>
       <div class="px-2 2xl:px-4">
-        <SearchInput
+        <SearchBox
           ref="searchBoxRef"
           v-model:model-value="searchQuery"
           class="workflows-search-box"
@@ -146,7 +146,7 @@ import { computed, nextTick, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import TextDivider from '@/components/common/TextDivider.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -22,7 +22,7 @@
     </template>
     <template #header>
       <div class="px-2 2xl:px-4">
-        <SearchInput
+        <SearchBox
           ref="searchBoxRef"
           v-model:model-value="searchQuery"
           :placeholder="
@@ -56,7 +56,7 @@
 import { Divider } from 'primevue'
 import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -86,40 +86,18 @@
       </template>
       <template #header>
         <div class="px-2 2xl:px-4">
-          <div class="flex items-center gap-1">
-            <SearchInput
-              ref="searchBoxRef"
-              v-model="searchQuery"
-              data-testid="node-library-search"
-              class="node-lib-search-box"
-              :placeholder="
-                $t('g.searchPlaceholder', { subject: $t('g.nodes') })
-              "
-              @search="handleSearch"
-            />
-            <Button
-              variant="textonly"
-              size="icon"
-              class="filter-button shrink-0"
-              :aria-label="$t('g.filter')"
-              @click="(e: Event) => searchFilter?.toggle(e)"
-            >
-              <i class="pi pi-filter" />
-            </Button>
-          </div>
-          <div
-            v-if="filters?.length"
-            class="search-filters flex flex-wrap gap-2 pt-2"
-          >
-            <SearchFilterChip
-              v-for="filter in filters"
-              :key="filter.id"
-              :text="filter.text"
-              :badge="filter.badge"
-              :badge-class="filter.badgeClass"
-              @remove="onRemoveFilter(filter)"
-            />
-          </div>
+          <SearchBox
+            ref="searchBoxRef"
+            v-model:model-value="searchQuery"
+            data-testid="node-library-search"
+            class="node-lib-search-box"
+            :placeholder="$t('g.searchPlaceholder', { subject: $t('g.nodes') })"
+            filter-icon="pi pi-filter"
+            :filters
+            @search="handleSearch"
+            @show-filter="($event) => searchFilter?.toggle($event)"
+            @remove-filter="onRemoveFilter"
+          />
 
           <Popover ref="searchFilter" class="ml-[-13px]">
             <NodeSearchFilter @add-filter="onAddFilter" />
@@ -177,9 +155,8 @@ import {
 } from 'vue'
 
 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
-import SearchFilterChip from '@/components/common/SearchFilterChip.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import type { SearchFilter } from '@/components/common/SearchFilterChip.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'

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

@@ -69,7 +69,7 @@ vi.mock('./nodeLibrary/NodeDragPreview.vue', () => ({
   }
 }))
 
-vi.mock('@/components/ui/search-input/SearchInput.vue', () => ({
+vi.mock('@/components/common/SearchBoxV2.vue', () => ({
   default: {
     name: 'SearchBox',
     template: '<input data-testid="search-box" />',

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue

@@ -3,7 +3,7 @@
     <template #header>
       <TabsRoot v-model="selectedTab" class="flex flex-col">
         <div class="flex items-center justify-between gap-2 px-2 pb-2 2xl:px-4">
-          <SearchInput
+          <SearchBox
             ref="searchBoxRef"
             v-model="searchQuery"
             :placeholder="$t('g.search') + '...'"
@@ -180,7 +180,7 @@ import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBoxV2.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
 import { usePerTabState } from '@/composables/usePerTabState'
@@ -253,7 +253,7 @@ const filterOptions = ref<Record<NodeCategoryId, boolean>>({
 
 const { t } = useI18n()
 
-const searchBoxRef = ref<InstanceType<typeof SearchInput> | null>(null)
+const searchBoxRef = ref<InstanceType<typeof SearchBox> | null>(null)
 const searchQuery = ref('')
 const expandedKeysByTab = ref<Record<TabId, string[]>>({
   essentials: [],

src/components/topbar/CurrentUserButton.test.ts

@@ -9,6 +9,18 @@ import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import CurrentUserButton from './CurrentUserButton.vue'
 
+const mockFeatureFlags = vi.hoisted(() => ({
+  teamWorkspacesEnabled: false
+}))
+
+const mockTeamWorkspaceStore = vi.hoisted(() => ({
+  workspaceName: { value: '' },
+  initState: { value: 'idle' },
+  isInPersonalWorkspace: { value: false }
+}))
+
+const mockIsCloud = vi.hoisted(() => ({ value: false }))
+
 // Mock all firebase modules
 vi.mock('firebase/app', () => ({
   initializeApp: vi.fn(),
@@ -32,16 +44,19 @@ vi.mock('pinia', () => ({
 // Mock the useFeatureFlags composable
 vi.mock('@/composables/useFeatureFlags', () => ({
   useFeatureFlags: vi.fn(() => ({
-    flags: { teamWorkspacesEnabled: false }
+    flags: mockFeatureFlags
   }))
 }))
 
 // Mock the useTeamWorkspaceStore
 vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
-  useTeamWorkspaceStore: vi.fn(() => ({
-    workspaceName: { value: '' },
-    initState: { value: 'idle' }
-  }))
+  useTeamWorkspaceStore: vi.fn(() => mockTeamWorkspaceStore)
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockIsCloud.value
+  }
 }))
 
 // Mock the useCurrentUser composable
@@ -64,6 +79,16 @@ vi.mock('@/components/common/UserAvatar.vue', () => ({
   }
 }))
 
+// Mock the WorkspaceProfilePic component
+vi.mock('@/platform/workspace/components/WorkspaceProfilePic.vue', () => ({
+  default: {
+    name: 'WorkspaceProfilePicMock',
+    render() {
+      return h('div', 'WorkspaceProfilePic')
+    }
+  }
+}))
+
 // Mock the CurrentUserPopoverLegacy component
 vi.mock('./CurrentUserPopoverLegacy.vue', () => ({
   default: {
@@ -78,9 +103,15 @@ vi.mock('./CurrentUserPopoverLegacy.vue', () => ({
 describe('CurrentUserButton', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockFeatureFlags.teamWorkspacesEnabled = false
+    mockTeamWorkspaceStore.workspaceName.value = ''
+    mockTeamWorkspaceStore.initState.value = 'idle'
+    mockTeamWorkspaceStore.isInPersonalWorkspace.value = false
+    mockIsCloud.value = false
   })
 
-  const mountComponent = (): VueWrapper => {
+  const mountComponent = (options?: { stubButton?: boolean }): VueWrapper => {
+    const { stubButton = true } = options ?? {}
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
@@ -99,7 +130,7 @@ describe('CurrentUserButton', () => {
               hide: vi.fn()
             }
           },
-          Button: true
+          ...(stubButton ? { Button: true } : {})
         }
       }
     })
@@ -137,4 +168,27 @@ describe('CurrentUserButton', () => {
     // Verify that popover.hide was called
     expect(popoverHideSpy).toHaveBeenCalled()
   })
+
+  it('shows UserAvatar in personal workspace', () => {
+    mockIsCloud.value = true
+    mockFeatureFlags.teamWorkspacesEnabled = true
+    mockTeamWorkspaceStore.initState.value = 'ready'
+    mockTeamWorkspaceStore.isInPersonalWorkspace.value = true
+
+    const wrapper = mountComponent({ stubButton: false })
+    expect(wrapper.html()).toContain('Avatar')
+    expect(wrapper.html()).not.toContain('WorkspaceProfilePic')
+  })
+
+  it('shows WorkspaceProfilePic in team workspace', () => {
+    mockIsCloud.value = true
+    mockFeatureFlags.teamWorkspacesEnabled = true
+    mockTeamWorkspaceStore.initState.value = 'ready'
+    mockTeamWorkspaceStore.isInPersonalWorkspace.value = false
+    mockTeamWorkspaceStore.workspaceName.value = 'My Team'
+
+    const wrapper = mountComponent({ stubButton: false })
+    expect(wrapper.html()).toContain('WorkspaceProfilePic')
+    expect(wrapper.html()).not.toContain('Avatar')
+  })
 })

src/components/topbar/CurrentUserButton.vue

@@ -98,15 +98,21 @@ const photoURL = computed<string | undefined>(
   () => userPhotoUrl.value ?? undefined
 )
 
-const { workspaceName: teamWorkspaceName, initState } = storeToRefs(
-  useTeamWorkspaceStore()
-)
+const {
+  workspaceName: teamWorkspaceName,
+  initState,
+  isInPersonalWorkspace
+} = storeToRefs(useTeamWorkspaceStore())
 
 const showWorkspaceSkeleton = computed(
   () => isCloud && teamWorkspacesEnabled.value && initState.value === 'loading'
 )
 const showWorkspaceIcon = computed(
-  () => isCloud && teamWorkspacesEnabled.value && initState.value === 'ready'
+  () =>
+    isCloud &&
+    teamWorkspacesEnabled.value &&
+    initState.value === 'ready' &&
+    !isInPersonalWorkspace.value
 )
 
 const workspaceName = computed(() => {

src/components/ui/button/button.variants.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 export const buttonVariants = cva({
-  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
+  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
   variants: {
     variant: {
       secondary:

src/components/ui/search-input/SearchInput.test.ts

@@ -1,202 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick, watch } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import SearchInput from './SearchInput.vue'
-
-vi.mock('@vueuse/core', () => ({
-  watchDebounced: vi.fn((source, cb, opts) => {
-    let timer: ReturnType<typeof setTimeout> | null = null
-    return watch(source, (val: string) => {
-      if (timer) clearTimeout(timer)
-      timer = setTimeout(() => cb(val), opts?.debounce ?? 300)
-    })
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: {
-        clear: 'Clear',
-        searchPlaceholder: 'Search...'
-      }
-    }
-  }
-})
-
-describe('SearchInput', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-    vi.useRealTimers()
-  })
-
-  function mountComponent(props = {}) {
-    return mount(SearchInput, {
-      global: {
-        plugins: [i18n],
-        stubs: {
-          ComboboxRoot: {
-            template: '<div><slot /></div>'
-          },
-          ComboboxAnchor: {
-            template: '<div @click="$emit(\'click\')"><slot /></div>',
-            emits: ['click']
-          },
-          ComboboxInput: {
-            template:
-              '<input :placeholder="placeholder" :value="modelValue" :autofocus="autoFocus || undefined" @input="$emit(\'update:modelValue\', $event.target.value)" />',
-            props: ['placeholder', 'modelValue', 'autoFocus']
-          }
-        }
-      },
-      props: {
-        modelValue: '',
-        ...props
-      }
-    })
-  }
-
-  describe('debounced search', () => {
-    it('should debounce search input by 300ms', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      await input.setValue('test')
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(299)
-      await nextTick()
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(1)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toEqual([['test']])
-    })
-
-    it('should reset debounce timer on each keystroke', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      await input.setValue('t')
-      vi.advanceTimersByTime(200)
-      await nextTick()
-
-      await input.setValue('te')
-      vi.advanceTimersByTime(200)
-      await nextTick()
-
-      await input.setValue('tes')
-      await vi.advanceTimersByTimeAsync(200)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(100)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeTruthy()
-      expect(wrapper.emitted('search')?.[0]).toEqual(['tes'])
-    })
-
-    it('should only emit final value after rapid typing', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      const searchTerms = ['s', 'se', 'sea', 'sear', 'searc', 'search']
-      for (const term of searchTerms) {
-        await input.setValue(term)
-        await vi.advanceTimersByTimeAsync(50)
-      }
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(350)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toHaveLength(1)
-      expect(wrapper.emitted('search')?.[0]).toEqual(['search'])
-    })
-  })
-
-  describe('model sync', () => {
-    it('should sync external model changes to internal state', async () => {
-      const wrapper = mountComponent({ modelValue: 'initial' })
-      const input = wrapper.find('input')
-
-      expect(input.element.value).toBe('initial')
-
-      await wrapper.setProps({ modelValue: 'external update' })
-      await nextTick()
-
-      expect(input.element.value).toBe('external update')
-    })
-  })
-
-  describe('placeholder', () => {
-    it('should use custom placeholder when provided', () => {
-      const wrapper = mountComponent({ placeholder: 'Custom search...' })
-      const input = wrapper.find('input')
-
-      expect(input.attributes('placeholder')).toBe('Custom search...')
-    })
-
-    it('should use i18n placeholder when not provided', () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      expect(input.attributes('placeholder')).toBe('Search...')
-    })
-  })
-
-  describe('autofocus', () => {
-    it('should pass autofocus prop to ComboboxInput', () => {
-      const wrapper = mountComponent({ autofocus: true })
-      const input = wrapper.find('input')
-      expect(input.attributes('autofocus')).toBeDefined()
-    })
-
-    it('should not autofocus by default', () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-      expect(input.attributes('autofocus')).toBeUndefined()
-    })
-  })
-
-  describe('focus method', () => {
-    it('should expose focus method via ref', () => {
-      const wrapper = mountComponent()
-      expect(wrapper.vm.focus).toBeDefined()
-    })
-  })
-
-  describe('clear button', () => {
-    it('shows search icon when value is empty', () => {
-      const wrapper = mountComponent({ modelValue: '' })
-      expect(wrapper.find('button[aria-label="Clear"]').exists()).toBe(false)
-    })
-
-    it('shows clear button when value is not empty', () => {
-      const wrapper = mountComponent({ modelValue: 'test' })
-      expect(wrapper.find('button[aria-label="Clear"]').exists()).toBe(true)
-    })
-
-    it('clears value when clear button is clicked', async () => {
-      const wrapper = mountComponent({ modelValue: 'test' })
-      const clearButton = wrapper.find('button')
-      await clearButton.trigger('click')
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
-    })
-  })
-})

src/components/ui/search-input/SearchInput.vue

@@ -1,15 +1,11 @@
 <template>
-  <ComboboxRoot
-    :ignore-filter="true"
-    :open="false"
-    :disabled="disabled"
-    :class="className"
-  >
+  <ComboboxRoot :ignore-filter="true" :open="false" :disabled="disabled">
     <ComboboxAnchor
       :class="
         cn(
           searchInputVariants({ size }),
-          disabled && 'pointer-events-none opacity-50'
+          disabled && 'pointer-events-none opacity-50',
+          className
         )
       "
       @click="focus"

src/components/ui/slider/Slider.stories.ts

@@ -1,77 +0,0 @@
-import type {
-  ComponentPropsAndSlots,
-  Meta,
-  StoryObj
-} from '@storybook/vue3-vite'
-import { computed, ref, toRefs } from 'vue'
-
-import Slider from './Slider.vue'
-
-interface StoryArgs extends ComponentPropsAndSlots<typeof Slider> {
-  disabled: boolean
-}
-
-const meta: Meta<StoryArgs> = {
-  title: 'Components/Slider',
-  component: Slider,
-  tags: ['autodocs'],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    min: { control: 'number' },
-    max: { control: 'number' },
-    step: { control: 'number' },
-    disabled: { control: 'boolean' }
-  },
-  args: {
-    min: 0,
-    max: 100,
-    step: 1,
-    disabled: false
-  },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div class="w-72"><story /></div>'
-    })
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { Slider },
-    setup() {
-      const { min, max, step, disabled } = toRefs(args)
-      const value = ref([36])
-      const display = computed(() => value.value[0])
-      return { value, display, min, max, step, disabled }
-    },
-    template: `
-      <div class="flex items-center gap-4 rounded-lg bg-component-node-widget-background px-3 py-2">
-        <Slider v-model="value" :min :max :step :disabled class="flex-1" />
-        <span class="w-14 shrink-0 text-right text-xs text-component-node-foreground">{{ display }}</span>
-      </div>
-    `
-  })
-}
-
-export const Disabled: Story = {
-  args: { disabled: true },
-  render: (args) => ({
-    components: { Slider },
-    setup() {
-      const { min, max, step, disabled } = toRefs(args)
-      const value = ref([36])
-      const display = computed(() => value.value[0])
-      return { value, display, min, max, step, disabled }
-    },
-    template: `
-      <div class="flex items-center gap-4 rounded-lg bg-component-node-widget-background px-3 py-2">
-        <Slider v-model="value" :min :max :step :disabled class="flex-1" />
-        <span class="w-14 shrink-0 text-right text-xs text-component-node-foreground">{{ display }}</span>
-      </div>
-    `
-  })
-}

src/components/widget/SampleModelSelector.vue

@@ -12,7 +12,7 @@
     </template>
 
     <template #header>
-      <SearchInput v-model="searchQuery" size="lg" class="max-w-96 flex-1" />
+      <SearchBox v-model="searchQuery" size="lg" class="max-w-[384px]" />
     </template>
 
     <template #header-right-area>
@@ -130,7 +130,7 @@ import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import Button from '@/components/ui/button/Button.vue'

src/components/widget/layout/BaseModalLayout.stories.ts

@@ -8,7 +8,7 @@ import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
@@ -68,7 +68,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
   components: {
     BaseModalLayout,
     LeftSidePanel,
-    SearchInput,
+    SearchBox,
     MultiSelect,
     SingleSelect,
     Button,
@@ -186,7 +186,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Header -->
         <template v-if="args.hasHeader" #header>
-          <SearchInput
+          <SearchBox
             class="max-w-[384px]"
             size="lg"
             :modelValue="searchQuery"
@@ -309,7 +309,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Header -->
         <template v-if="args.hasHeader" #header>
-          <SearchInput
+          <SearchBox
             class="max-w-[384px]"
             size="lg"
             :modelValue="searchQuery"

src/composables/graph/useGraphNodeManager.test.ts

@@ -238,6 +238,160 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
 
     expect(widgetData?.slotMetadata?.linked).toBe(false)
   })
+
+  it('clears stale slotMetadata when input no longer matches widget', async () => {
+    const { graph, node } = createWidgetInputGraph()
+    const { vueNodeData } = useGraphNodeManager(graph)
+
+    const nodeData = vueNodeData.get(String(node.id))!
+    const widgetData = nodeData.widgets!.find((w) => w.name === 'prompt')!
+
+    expect(widgetData.slotMetadata?.linked).toBe(true)
+
+    node.inputs[0].name = 'other'
+    node.inputs[0].widget = { name: 'other' }
+    node.inputs[0].link = null
+
+    graph.trigger('node:slot-links:changed', {
+      nodeId: node.id,
+      slotType: NodeSlotType.INPUT,
+      slotIndex: 0,
+      connected: false,
+      linkId: 42
+    })
+
+    await nextTick()
+
+    expect(widgetData.slotMetadata).toBeUndefined()
+  })
+
+  it('prefers exact _widget input matches before same-name fallbacks for promoted widgets', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [
+        { name: 'seed', type: '*' },
+        { name: 'seed', type: '*' }
+      ]
+    })
+
+    const firstNode = new LGraphNode('FirstNode')
+    const firstInput = firstNode.addInput('seed', '*')
+    firstNode.addWidget('number', 'seed', 1, () => undefined, {})
+    firstInput.widget = { name: 'seed' }
+    subgraph.add(firstNode)
+
+    const secondNode = new LGraphNode('SecondNode')
+    const secondInput = secondNode.addInput('seed', '*')
+    secondNode.addWidget('number', 'seed', 2, () => undefined, {})
+    secondInput.widget = { name: 'seed' }
+    subgraph.add(secondNode)
+
+    subgraph.inputNode.slots[0].connect(firstInput, firstNode)
+    subgraph.inputNode.slots[1].connect(secondInput, secondNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 124 })
+    const graph = subgraphNode.graph
+    if (!graph) throw new Error('Expected subgraph node graph')
+    graph.add(subgraphNode)
+
+    const promotedViews = subgraphNode.widgets
+    const secondPromotedView = promotedViews[1]
+    if (!secondPromotedView) throw new Error('Expected second promoted view')
+
+    ;(
+      secondPromotedView as unknown as {
+        sourceNodeId: string
+        sourceWidgetName: string
+      }
+    ).sourceNodeId = '9999'
+    ;(
+      secondPromotedView as unknown as {
+        sourceNodeId: string
+        sourceWidgetName: string
+      }
+    ).sourceWidgetName = 'stale_widget'
+
+    const { vueNodeData } = useGraphNodeManager(graph)
+    const nodeData = vueNodeData.get(String(subgraphNode.id))
+    const secondMappedWidget = nodeData?.widgets?.find(
+      (widget) => widget.slotMetadata?.index === 1
+    )
+    if (!secondMappedWidget)
+      throw new Error('Expected mapped widget for slot 1')
+
+    expect(secondMappedWidget.name).not.toBe('stale_widget')
+  })
+})
+
+describe('Subgraph output slot label reactivity', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  it('updates output slot labels when node:slot-label:changed is triggered', async () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('test')
+    node.addOutput('original_name', 'STRING')
+    node.addOutput('other_name', 'STRING')
+    graph.add(node)
+
+    const { vueNodeData } = useGraphNodeManager(graph)
+    const nodeId = String(node.id)
+    const nodeData = vueNodeData.get(nodeId)
+    if (!nodeData?.outputs) throw new Error('Expected output data to exist')
+
+    expect(nodeData.outputs[0].label).toBeUndefined()
+    expect(nodeData.outputs[1].label).toBeUndefined()
+
+    // Simulate what SubgraphNode does: set the label, then fire the trigger
+    node.outputs[0].label = 'custom_label'
+    graph.trigger('node:slot-label:changed', {
+      nodeId: node.id,
+      slotType: NodeSlotType.OUTPUT
+    })
+
+    await nextTick()
+
+    const updatedData = vueNodeData.get(nodeId)
+    expect(updatedData?.outputs?.[0]?.label).toBe('custom_label')
+    expect(updatedData?.outputs?.[1]?.label).toBeUndefined()
+  })
+
+  it('updates input slot labels when node:slot-label:changed is triggered', async () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('test')
+    node.addInput('original_name', 'STRING')
+    graph.add(node)
+
+    const { vueNodeData } = useGraphNodeManager(graph)
+    const nodeId = String(node.id)
+    const nodeData = vueNodeData.get(nodeId)
+    if (!nodeData?.inputs) throw new Error('Expected input data to exist')
+
+    expect(nodeData.inputs[0].label).toBeUndefined()
+
+    node.inputs[0].label = 'custom_label'
+    graph.trigger('node:slot-label:changed', {
+      nodeId: node.id,
+      slotType: NodeSlotType.INPUT
+    })
+
+    await nextTick()
+
+    const updatedData = vueNodeData.get(nodeId)
+    expect(updatedData?.inputs?.[0]?.label).toBe('custom_label')
+  })
+
+  it('ignores node:slot-label:changed for unknown node ids', () => {
+    const graph = new LGraph()
+    useGraphNodeManager(graph)
+
+    expect(() =>
+      graph.trigger('node:slot-label:changed', {
+        nodeId: 'missing-node',
+        slotType: NodeSlotType.OUTPUT
+      })
+    ).not.toThrow()
+  })
 })
 
 describe('Subgraph Promoted Pseudo Widgets', () => {
@@ -315,4 +469,54 @@ describe('Nested promoted widget mapping', () => {
       `${subgraphNodeB.subgraph.id}:${innerNode.id}`
     )
   })
+
+  it('keeps linked and independent same-name promotions as distinct sources', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'string_a', type: '*' }]
+    })
+
+    const linkedNode = new LGraphNode('LinkedNode')
+    const linkedInput = linkedNode.addInput('string_a', '*')
+    linkedNode.addWidget('text', 'string_a', 'linked', () => undefined, {})
+    linkedInput.widget = { name: 'string_a' }
+    subgraph.add(linkedNode)
+    subgraph.inputNode.slots[0].connect(linkedInput, linkedNode)
+
+    const independentNode = new LGraphNode('IndependentNode')
+    independentNode.addWidget(
+      'text',
+      'string_a',
+      'independent',
+      () => undefined,
+      {}
+    )
+    subgraph.add(independentNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 109 })
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    usePromotionStore().promote(
+      subgraphNode.rootGraph.id,
+      subgraphNode.id,
+      String(independentNode.id),
+      'string_a'
+    )
+
+    const { vueNodeData } = useGraphNodeManager(graph)
+    const nodeData = vueNodeData.get(String(subgraphNode.id))
+    const promotedWidgets = nodeData?.widgets?.filter(
+      (widget) => widget.name === 'string_a'
+    )
+
+    expect(promotedWidgets).toHaveLength(2)
+    expect(
+      new Set(promotedWidgets?.map((widget) => widget.storeNodeId))
+    ).toEqual(
+      new Set([
+        `${subgraph.id}:${linkedNode.id}`,
+        `${subgraph.id}:${independentNode.id}`
+      ])
+    )
+  })
 })

src/composables/graph/useGraphNodeManager.ts

@@ -7,6 +7,7 @@ import { reactive, shallowReactive } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+import { matchPromotedInput } from '@/core/graph/subgraph/matchPromotedInput'
 import { resolveConcretePromotedWidget } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
 import { resolvePromotedWidgetSource } from '@/core/graph/subgraph/resolvePromotedWidgetSource'
 import { resolveSubgraphInputTarget } from '@/core/graph/subgraph/resolveSubgraphInputTarget'
@@ -204,7 +205,7 @@ function safeWidgetMapper(
 
     return {
       canvasOnly: widget.options.canvasOnly,
-      advanced: widget.advanced,
+      advanced: widget.options?.advanced ?? widget.advanced,
       hidden: widget.options.hidden,
       read_only: widget.options.read_only
     }
@@ -234,16 +235,17 @@ function safeWidgetMapper(
       }
     }
 
-    const promotedInputName = node.inputs?.find((input) => {
-      if (input.name === widget.name) return true
-      if (input._widget === widget) return true
-      return false
-    })?.name
+    const matchedInput = matchPromotedInput(node.inputs, widget)
+    const promotedInputName = matchedInput?.name
     const displayName = promotedInputName ?? widget.name
-    const promotedSource = resolvePromotedSourceByInputName(displayName) ?? {
+    const directSource = {
       sourceNodeId: widget.sourceNodeId,
       sourceWidgetName: widget.sourceWidgetName
     }
+    const promotedSource =
+      matchedInput?._widget === widget
+        ? (resolvePromotedSourceByInputName(displayName) ?? directSource)
+        : directSource
 
     return {
       displayName,
@@ -467,8 +469,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
 
     // Update only widgets with new slot metadata, keeping other widget data intact
     for (const widget of currentData.widgets ?? []) {
-      const slotInfo = slotMetadata.get(widget.slotName ?? widget.name)
-      if (slotInfo) widget.slotMetadata = slotInfo
+      widget.slotMetadata = slotMetadata.get(widget.slotName ?? widget.name)
     }
   }
 

src/composables/graph/useMoreOptionsMenu.ts

@@ -80,8 +80,12 @@ export function showNodeOptions(
 }
 
 /**
- * Hide the node options popover
+ * Check if the node options menu is currently open
  */
+export function isNodeOptionsOpen(): boolean {
+  return nodeOptionsInstance?.isOpen.value ?? false
+}
+
 interface NodeOptionsInstance {
   toggle: (event: Event) => void
   show: (event: MouseEvent) => void

src/composables/maskeditor/useMaskEditorSaver.test.ts

@@ -0,0 +1,183 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
+import { api } from '@/scripts/api'
+import { useNodeOutputStore } from '@/stores/nodeOutputStore'
+import { useMaskEditorSaver } from './useMaskEditorSaver'
+
+// ---- Module Mocks ----
+
+const mockDataStore: Record<string, unknown> = {
+  sourceNode: null,
+  inputData: null,
+  outputData: null
+}
+
+vi.mock('@/stores/maskEditorDataStore', () => ({
+  useMaskEditorDataStore: vi.fn(() => mockDataStore)
+}))
+
+function createMockCtx(): CanvasRenderingContext2D {
+  return {
+    drawImage: vi.fn(),
+    getImageData: vi.fn(() => ({
+      data: new Uint8ClampedArray(4 * 4 * 4),
+      width: 4,
+      height: 4
+    })),
+    putImageData: vi.fn(),
+    globalCompositeOperation: 'source-over'
+  } as unknown as CanvasRenderingContext2D
+}
+
+function createMockCanvas(): HTMLCanvasElement {
+  return {
+    width: 4,
+    height: 4,
+    getContext: vi.fn(() => createMockCtx()),
+    toBlob: vi.fn((cb: BlobCallback) => {
+      cb(new Blob(['x'], { type: 'image/png' }))
+    }),
+    toDataURL: vi.fn(() => 'data:image/png;base64,mock')
+  } as unknown as HTMLCanvasElement
+}
+
+const mockEditorStore: Record<string, HTMLCanvasElement | null> = {
+  maskCanvas: null,
+  rgbCanvas: null,
+  imgCanvas: null
+}
+
+vi.mock('@/stores/maskEditorStore', () => ({
+  useMaskEditorStore: vi.fn(() => mockEditorStore)
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    fetchApi: vi.fn(),
+    apiURL: vi.fn((route: string) => `http://localhost:8188${route}`)
+  }
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    canvas: { setDirty: vi.fn() },
+    nodeOutputs: {} as Record<string, unknown>,
+    nodePreviewImages: {} as Record<string, string[]>,
+    getPreviewFormatParam: vi.fn(() => ''),
+    getRandParam: vi.fn(() => '')
+  }
+}))
+
+vi.mock('@/platform/distribution/types', () => ({ isCloud: false }))
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: vi.fn(() => ({
+    nodeIdToNodeLocatorId: vi.fn((id: string | number) => String(id)),
+    nodeToNodeLocatorId: vi.fn((node: { id: number }) => String(node.id))
+  }))
+}))
+
+vi.mock('@/utils/graphTraversalUtil', () => ({
+  executionIdToNodeLocatorId: vi.fn((_rootGraph: unknown, id: string) => id)
+}))
+
+describe('useMaskEditorSaver', () => {
+  let mockNode: LGraphNode
+  const originalCreateElement = document.createElement.bind(document)
+
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.clearAllMocks()
+
+    app.nodeOutputs = {}
+    app.nodePreviewImages = {}
+
+    mockNode = {
+      id: 42,
+      type: 'LoadImage',
+      images: [],
+      imgs: undefined,
+      widgets: [
+        { name: 'image', value: 'original.png [input]', callback: vi.fn() }
+      ],
+      widgets_values: ['original.png [input]'],
+      properties: { image: 'original.png [input]' },
+      graph: { setDirtyCanvas: vi.fn() }
+    } as unknown as LGraphNode
+
+    mockDataStore.sourceNode = mockNode
+    mockDataStore.inputData = {
+      baseLayer: { image: {} as HTMLImageElement, url: 'base.png' },
+      maskLayer: { image: {} as HTMLImageElement, url: 'mask.png' },
+      sourceRef: { filename: 'original.png', subfolder: '', type: 'input' },
+      nodeId: 42
+    }
+    mockDataStore.outputData = null
+
+    mockEditorStore.maskCanvas = createMockCanvas()
+    mockEditorStore.rgbCanvas = createMockCanvas()
+    mockEditorStore.imgCanvas = createMockCanvas()
+
+    vi.mocked(api.fetchApi).mockResolvedValue({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          name: 'clipspace-painted-masked-123.png',
+          subfolder: 'clipspace',
+          type: 'input'
+        })
+    } as Response)
+
+    vi.spyOn(document, 'createElement').mockImplementation(
+      (tagName: string, options?: ElementCreationOptions) => {
+        if (tagName === 'canvas')
+          return createMockCanvas() as unknown as HTMLCanvasElement
+        return originalCreateElement(tagName, options)
+      }
+    )
+
+    // Mock Image constructor so loadImageFromUrl resolves
+    vi.stubGlobal(
+      'Image',
+      class MockImage {
+        crossOrigin = ''
+        onload: ((ev: Event) => void) | null = null
+        onerror: ((ev: unknown) => void) | null = null
+        private _src = ''
+        get src() {
+          return this._src
+        }
+        set src(value: string) {
+          this._src = value
+          queueMicrotask(() => this.onload?.(new Event('load')))
+        }
+      }
+    )
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('registers node outputs in store after save for node without prior execution outputs', async () => {
+    const store = useNodeOutputStore()
+    const locatorId = String(mockNode.id)
+
+    // Precondition: node has never been executed, no outputs exist
+    expect(app.nodeOutputs[locatorId]).toBeUndefined()
+
+    const { save } = useMaskEditorSaver()
+    await save()
+
+    // After mask editor save, the node must have outputs in the store
+    // so the image preview displays correctly (not blank).
+    // Bug: the old code used updateNodeImages which silently no-ops
+    // when there are no pre-existing outputs for the node.
+    expect(store.nodeOutputs[locatorId]).toBeDefined()
+    expect(store.nodeOutputs[locatorId]?.images?.length).toBeGreaterThan(0)
+  })
+})

src/composables/maskeditor/useMaskEditorSaver.ts

@@ -9,6 +9,7 @@ import type {
 import { isCloud } from '@/platform/distribution/types'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import { createAnnotatedPath } from '@/utils/createAnnotatedPath'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 // Private layer filename functions
@@ -347,11 +348,15 @@ export function useMaskEditorSaver() {
           node.widgets_values[widgetIndex] = widgetValue
         }
       }
-
-      imageWidget.callback?.(widgetValue)
     }
 
-    nodeOutputStore.updateNodeImages(node)
+    node.imgs = undefined
+    const annotatedPath = createAnnotatedPath(mainRef.filename, {
+      subfolder: mainRef.subfolder,
+      rootFolder: mainRef.type
+    })
+    nodeOutputStore.setNodeOutputs(node, annotatedPath, { folder: 'input' })
+    node.graph?.setDirtyCanvas(true)
   }
 
   function loadImageFromUrl(url: string): Promise<HTMLImageElement> {

src/composables/usePaste.test.ts

@@ -595,6 +595,34 @@ describe('usePaste', () => {
       )
     })
   })
+
+  it('should skip node metadata paste when a media node is selected', async () => {
+    const mockNode = createMockLGraphNode({
+      is_selected: true,
+      pasteFile: vi.fn(),
+      pasteFiles: vi.fn()
+    })
+    mockCanvas.current_node = mockNode
+    vi.mocked(isImageNode).mockReturnValue(true)
+
+    usePaste()
+
+    const nodeData = { nodes: [{ type: 'KSampler' }] }
+    const encoded = btoa(JSON.stringify(nodeData))
+    const html = `<div data-metadata="${encoded}"></div>`
+
+    const dataTransfer = new DataTransfer()
+    dataTransfer.setData('text/html', html)
+    dataTransfer.setData('text/plain', 'some text')
+
+    const event = new ClipboardEvent('paste', { clipboardData: dataTransfer })
+    document.dispatchEvent(event)
+
+    await vi.waitFor(() => {
+      expect(mockCanvas._deserializeItems).not.toHaveBeenCalled()
+      expect(mockCanvas.pasteFromClipboard).toHaveBeenCalled()
+    })
+  })
 })
 
 describe('cloneDataTransfer', () => {

src/composables/usePaste.ts

@@ -229,7 +229,10 @@ export const usePaste = () => {
         return
       }
     }
-    if (pasteClipboardItems(data)) return
+
+    const isMediaNodeSelected =
+      isImageNodeSelected || isVideoNodeSelected || isAudioNodeSelected
+    if (!isMediaNodeSelected && pasteClipboardItems(data)) return
 
     // No image found. Look for node data
     data = data.getData('text/plain')

src/core/graph/subgraph/matchPromotedInput.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest'
+
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+
+import { matchPromotedInput } from './matchPromotedInput'
+
+type MockInput = {
+  name: string
+  _widget?: IBaseWidget
+}
+
+function createWidget(name: string): IBaseWidget {
+  return {
+    name,
+    type: 'text'
+  } as IBaseWidget
+}
+
+describe(matchPromotedInput, () => {
+  it('prefers exact _widget matches before same-name inputs', () => {
+    const targetWidget = createWidget('seed')
+    const aliasWidget = createWidget('seed')
+
+    const aliasInput: MockInput = {
+      name: 'seed',
+      _widget: aliasWidget
+    }
+    const exactInput: MockInput = {
+      name: 'seed',
+      _widget: targetWidget
+    }
+
+    const matched = matchPromotedInput(
+      [aliasInput, exactInput] as unknown as Array<{
+        name: string
+        _widget?: IBaseWidget
+      }>,
+      targetWidget
+    )
+
+    expect(matched).toBe(exactInput)
+  })
+
+  it('falls back to same-name matching when no exact widget match exists', () => {
+    const targetWidget = createWidget('seed')
+    const aliasInput: MockInput = {
+      name: 'seed'
+    }
+
+    const matched = matchPromotedInput(
+      [aliasInput] as unknown as Array<{ name: string; _widget?: IBaseWidget }>,
+      targetWidget
+    )
+
+    expect(matched).toBe(aliasInput)
+  })
+
+  it('does not guess when multiple same-name inputs exist without an exact match', () => {
+    const targetWidget = createWidget('seed')
+    const firstAliasInput: MockInput = {
+      name: 'seed'
+    }
+    const secondAliasInput: MockInput = {
+      name: 'seed'
+    }
+
+    const matched = matchPromotedInput(
+      [firstAliasInput, secondAliasInput] as unknown as Array<{
+        name: string
+        _widget?: IBaseWidget
+      }>,
+      targetWidget
+    )
+
+    expect(matched).toBeUndefined()
+  })
+})

src/core/graph/subgraph/matchPromotedInput.ts

@@ -0,0 +1,19 @@
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+
+type PromotedInputLike = {
+  name: string
+  _widget?: IBaseWidget
+}
+
+export function matchPromotedInput(
+  inputs: PromotedInputLike[] | undefined,
+  widget: IBaseWidget
+): PromotedInputLike | undefined {
+  if (!inputs) return undefined
+
+  const exactMatch = inputs.find((input) => input._widget === widget)
+  if (exactMatch) return exactMatch
+
+  const sameNameMatches = inputs.filter((input) => input.name === widget.name)
+  return sameNameMatches.length === 1 ? sameNameMatches[0] : undefined
+}

src/core/graph/subgraph/promotedWidgetView.test.ts

@@ -1,6 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, test, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 
 // Barrel import must come first to avoid circular dependency
 // (promotedWidgetView → widgetMap → BaseWidget → LegacyWidget → barrel)
@@ -11,19 +11,26 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import type {
   CanvasPointerEvent,
+  LGraphCanvas,
   SubgraphNode
 } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 
 import { createPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetView'
 import type { PromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetView'
+import { resolveConcretePromotedWidget } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
 import { resolvePromotedWidgetSource } from '@/core/graph/subgraph/resolvePromotedWidgetSource'
 import { usePromotionStore } from '@/stores/promotionStore'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
+import {
+  stripGraphPrefix,
+  useWidgetValueStore
+} from '@/stores/widgetValueStore'
 
 import {
+  cleanupComplexPromotionFixtureNodeType,
   createTestSubgraph,
-  createTestSubgraphNode
+  createTestSubgraphNode,
+  setupComplexPromotionFixture
 } from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
 
 vi.mock('@/renderer/core/canvas/canvasStore', () => ({
@@ -78,6 +85,22 @@ function firstInnerNode(innerNodes: LGraphNode[]): LGraphNode {
   return innerNode
 }
 
+function promotedWidgets(node: SubgraphNode): PromotedWidgetView[] {
+  return node.widgets as PromotedWidgetView[]
+}
+
+function callSyncPromotions(node: SubgraphNode) {
+  ;(
+    node as unknown as {
+      _syncPromotions: () => void
+    }
+  )._syncPromotions()
+}
+
+afterEach(() => {
+  cleanupComplexPromotionFixtureNodeType()
+})
+
 describe(createPromotedWidgetView, () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))
@@ -263,6 +286,31 @@ describe(createPromotedWidgetView, () => {
     expect(fallbackWidget.value).toBe('updated')
   })
 
+  test('value setter falls back to host widget when linked states are unavailable', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'string_a', type: '*' }]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 124 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const linkedNode = new LGraphNode('LinkedNode')
+    const linkedInput = linkedNode.addInput('string_a', '*')
+    linkedNode.addWidget('text', 'string_a', 'initial', () => {})
+    linkedInput.widget = { name: 'string_a' }
+    subgraph.add(linkedNode)
+    subgraph.inputNode.slots[0].connect(linkedInput, linkedNode)
+
+    const linkedView = promotedWidgets(subgraphNode)[0]
+    if (!linkedView) throw new Error('Expected a linked promoted widget')
+
+    const widgetValueStore = useWidgetValueStore()
+    vi.spyOn(widgetValueStore, 'getWidget').mockReturnValue(undefined)
+
+    linkedView.value = 'updated'
+
+    expect(linkedNode.widgets?.[0].value).toBe('updated')
+  })
+
   test('label falls back to displayName then widgetName', () => {
     const [subgraphNode, innerNodes] = setupSubgraph(1)
     const innerNode = firstInnerNode(innerNodes)
@@ -495,6 +543,185 @@ describe('SubgraphNode.widgets getter', () => {
     ])
   })
 
+  test('renders all promoted widgets when duplicate input names are connected to different nodes', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [
+        { name: 'seed', type: '*' },
+        { name: 'seed', type: '*' }
+      ]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 94 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const firstNode = new LGraphNode('FirstSeedNode')
+    const firstInput = firstNode.addInput('seed', '*')
+    firstNode.addWidget('number', 'seed', 1, () => {})
+    firstInput.widget = { name: 'seed' }
+    subgraph.add(firstNode)
+
+    const secondNode = new LGraphNode('SecondSeedNode')
+    const secondInput = secondNode.addInput('seed', '*')
+    secondNode.addWidget('number', 'seed', 2, () => {})
+    secondInput.widget = { name: 'seed' }
+    subgraph.add(secondNode)
+
+    subgraph.inputNode.slots[0].connect(firstInput, firstNode)
+    subgraph.inputNode.slots[1].connect(secondInput, secondNode)
+
+    const widgets = promotedWidgets(subgraphNode)
+    expect(widgets).toHaveLength(2)
+    expect(widgets.map((widget) => widget.sourceNodeId)).toStrictEqual([
+      String(firstNode.id),
+      String(secondNode.id)
+    ])
+  })
+
+  test('input-linked same-name widgets share value state while store-promoted peer stays independent', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'string_a', type: '*' }]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 95 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const linkedNodeA = new LGraphNode('LinkedNodeA')
+    const linkedInputA = linkedNodeA.addInput('string_a', '*')
+    linkedNodeA.addWidget('text', 'string_a', 'a', () => {})
+    linkedInputA.widget = { name: 'string_a' }
+    subgraph.add(linkedNodeA)
+
+    const linkedNodeB = new LGraphNode('LinkedNodeB')
+    const linkedInputB = linkedNodeB.addInput('string_a', '*')
+    linkedNodeB.addWidget('text', 'string_a', 'b', () => {})
+    linkedInputB.widget = { name: 'string_a' }
+    subgraph.add(linkedNodeB)
+
+    const promotedNode = new LGraphNode('PromotedNode')
+    promotedNode.addWidget('text', 'string_a', 'independent', () => {})
+    subgraph.add(promotedNode)
+
+    subgraph.inputNode.slots[0].connect(linkedInputA, linkedNodeA)
+    subgraph.inputNode.slots[0].connect(linkedInputB, linkedNodeB)
+
+    usePromotionStore().promote(
+      subgraphNode.rootGraph.id,
+      subgraphNode.id,
+      String(promotedNode.id),
+      'string_a'
+    )
+    usePromotionStore().promote(
+      subgraphNode.rootGraph.id,
+      subgraphNode.id,
+      String(linkedNodeA.id),
+      'string_a'
+    )
+
+    const widgets = promotedWidgets(subgraphNode)
+    expect(widgets).toHaveLength(2)
+
+    const linkedView = widgets.find(
+      (widget) => widget.sourceNodeId === String(linkedNodeA.id)
+    )
+    const promotedView = widgets.find(
+      (widget) => widget.sourceNodeId === String(promotedNode.id)
+    )
+    if (!linkedView || !promotedView)
+      throw new Error(
+        'Expected linked and store-promoted widgets to be present'
+      )
+
+    linkedView.value = 'shared-value'
+
+    const widgetStore = useWidgetValueStore()
+    const graphId = subgraphNode.rootGraph.id
+    expect(
+      widgetStore.getWidget(
+        graphId,
+        stripGraphPrefix(String(linkedNodeA.id)),
+        'string_a'
+      )?.value
+    ).toBe('shared-value')
+    expect(
+      widgetStore.getWidget(
+        graphId,
+        stripGraphPrefix(String(linkedNodeB.id)),
+        'string_a'
+      )?.value
+    ).toBe('shared-value')
+    expect(
+      widgetStore.getWidget(
+        graphId,
+        stripGraphPrefix(String(promotedNode.id)),
+        'string_a'
+      )?.value
+    ).toBe('independent')
+
+    promotedView.value = 'independent-updated'
+
+    expect(
+      widgetStore.getWidget(
+        graphId,
+        stripGraphPrefix(String(linkedNodeA.id)),
+        'string_a'
+      )?.value
+    ).toBe('shared-value')
+    expect(
+      widgetStore.getWidget(
+        graphId,
+        stripGraphPrefix(String(linkedNodeB.id)),
+        'string_a'
+      )?.value
+    ).toBe('shared-value')
+    expect(
+      widgetStore.getWidget(
+        graphId,
+        stripGraphPrefix(String(promotedNode.id)),
+        'string_a'
+      )?.value
+    ).toBe('independent-updated')
+  })
+
+  test('duplicate-name promoted views map slot linkage by view identity', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'string_a', type: '*' }]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 109 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const linkedNode = new LGraphNode('LinkedNode')
+    const linkedInput = linkedNode.addInput('string_a', '*')
+    linkedNode.addWidget('text', 'string_a', 'linked', () => {})
+    linkedInput.widget = { name: 'string_a' }
+    subgraph.add(linkedNode)
+
+    const independentNode = new LGraphNode('IndependentNode')
+    independentNode.addWidget('text', 'string_a', 'independent', () => {})
+    subgraph.add(independentNode)
+
+    subgraph.inputNode.slots[0].connect(linkedInput, linkedNode)
+    usePromotionStore().promote(
+      subgraphNode.rootGraph.id,
+      subgraphNode.id,
+      String(independentNode.id),
+      'string_a'
+    )
+
+    const widgets = promotedWidgets(subgraphNode)
+    const linkedView = widgets.find(
+      (widget) => widget.sourceNodeId === String(linkedNode.id)
+    )
+    const independentView = widgets.find(
+      (widget) => widget.sourceNodeId === String(independentNode.id)
+    )
+    if (!linkedView || !independentView)
+      throw new Error('Expected linked and independent promoted views')
+
+    const linkedSlot = subgraphNode.getSlotFromWidget(linkedView)
+    const independentSlot = subgraphNode.getSlotFromWidget(independentView)
+
+    expect(linkedSlot).toBeDefined()
+    expect(independentSlot).toBeUndefined()
+  })
+
   test('returns empty array when no proxyWidgets', () => {
     const [subgraphNode] = setupSubgraph()
     expect(subgraphNode.widgets).toEqual([])
@@ -558,6 +785,273 @@ describe('SubgraphNode.widgets getter', () => {
     ])
   })
 
+  test('full linked coverage does not prune unresolved independent fallback promotions', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'widgetA', type: '*' }]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 125 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const liveNode = new LGraphNode('LiveNode')
+    const liveInput = liveNode.addInput('widgetA', '*')
+    liveNode.addWidget('text', 'widgetA', 'a', () => {})
+    liveInput.widget = { name: 'widgetA' }
+    subgraph.add(liveNode)
+    subgraph.inputNode.slots[0].connect(liveInput, liveNode)
+
+    setPromotions(subgraphNode, [
+      [String(liveNode.id), 'widgetA'],
+      ['9999', 'widgetA']
+    ])
+
+    callSyncPromotions(subgraphNode)
+
+    const promotions = usePromotionStore().getPromotions(
+      subgraphNode.rootGraph.id,
+      subgraphNode.id
+    )
+    expect(promotions).toStrictEqual([
+      { interiorNodeId: String(liveNode.id), widgetName: 'widgetA' },
+      { interiorNodeId: '9999', widgetName: 'widgetA' }
+    ])
+  })
+
+  test('input-added existing-input path tolerates missing link metadata', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'widgetA', type: '*' }]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 126 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const existingSlot = subgraph.inputNode.slots[0]
+    if (!existingSlot) throw new Error('Expected subgraph input slot')
+
+    expect(() => {
+      subgraph.events.dispatch('input-added', { input: existingSlot })
+    }).not.toThrow()
+  })
+
+  test('syncPromotions prunes stale connected entries but keeps independent promotions', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'string_a', type: '*' }]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 96 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const linkedNodeA = new LGraphNode('LinkedNodeA')
+    const linkedInputA = linkedNodeA.addInput('string_a', '*')
+    linkedNodeA.addWidget('text', 'string_a', 'a', () => {})
+    linkedInputA.widget = { name: 'string_a' }
+    subgraph.add(linkedNodeA)
+
+    const linkedNodeB = new LGraphNode('LinkedNodeB')
+    const linkedInputB = linkedNodeB.addInput('string_a', '*')
+    linkedNodeB.addWidget('text', 'string_a', 'b', () => {})
+    linkedInputB.widget = { name: 'string_a' }
+    subgraph.add(linkedNodeB)
+
+    const independentNode = new LGraphNode('IndependentNode')
+    independentNode.addWidget('text', 'string_a', 'independent', () => {})
+    subgraph.add(independentNode)
+
+    subgraph.inputNode.slots[0].connect(linkedInputA, linkedNodeA)
+    subgraph.inputNode.slots[0].connect(linkedInputB, linkedNodeB)
+
+    setPromotions(subgraphNode, [
+      [String(independentNode.id), 'string_a'],
+      [String(linkedNodeA.id), 'string_a'],
+      [String(linkedNodeB.id), 'string_a']
+    ])
+
+    callSyncPromotions(subgraphNode)
+
+    const promotions = usePromotionStore().getPromotions(
+      subgraphNode.rootGraph.id,
+      subgraphNode.id
+    )
+    expect(promotions).toStrictEqual([
+      { interiorNodeId: String(linkedNodeA.id), widgetName: 'string_a' },
+      { interiorNodeId: String(independentNode.id), widgetName: 'string_a' }
+    ])
+  })
+
+  test('syncPromotions prunes stale deep-alias entries for nested linked promotions', () => {
+    const { subgraphNodeB } = createTwoLevelNestedSubgraph()
+    const linkedView = promotedWidgets(subgraphNodeB)[0]
+    if (!linkedView)
+      throw new Error(
+        'Expected nested subgraph to expose a linked promoted view'
+      )
+
+    const concrete = resolveConcretePromotedWidget(
+      subgraphNodeB,
+      linkedView.sourceNodeId,
+      linkedView.sourceWidgetName
+    )
+    if (concrete.status !== 'resolved')
+      throw new Error(
+        'Expected nested promoted view to resolve to concrete widget'
+      )
+
+    const linkedEntry = [
+      linkedView.sourceNodeId,
+      linkedView.sourceWidgetName
+    ] as [string, string]
+    const deepAliasEntry = [
+      String(concrete.resolved.node.id),
+      concrete.resolved.widget.name
+    ] as [string, string]
+
+    // Guardrail: this test specifically validates host/deep alias cleanup.
+    expect(deepAliasEntry).not.toStrictEqual(linkedEntry)
+
+    setPromotions(subgraphNodeB, [linkedEntry, deepAliasEntry])
+
+    callSyncPromotions(subgraphNodeB)
+
+    const promotions = usePromotionStore().getPromotions(
+      subgraphNodeB.rootGraph.id,
+      subgraphNodeB.id
+    )
+    expect(promotions).toStrictEqual([
+      {
+        interiorNodeId: linkedEntry[0],
+        widgetName: linkedEntry[1]
+      }
+    ])
+  })
+
+  test('configure prunes stale disconnected host aliases that resolve to the active linked concrete widget', () => {
+    const nestedSubgraph = createTestSubgraph({
+      inputs: [{ name: 'string_a', type: '*' }]
+    })
+
+    const concreteNode = new LGraphNode('ConcreteNode')
+    const concreteInput = concreteNode.addInput('string_a', '*')
+    concreteNode.addWidget('text', 'string_a', 'value', () => {})
+    concreteInput.widget = { name: 'string_a' }
+    nestedSubgraph.add(concreteNode)
+    nestedSubgraph.inputNode.slots[0].connect(concreteInput, concreteNode)
+
+    const hostSubgraph = createTestSubgraph({
+      inputs: [{ name: 'string_a', type: '*' }]
+    })
+
+    const activeAliasNode = createTestSubgraphNode(nestedSubgraph, { id: 118 })
+    const staleAliasNode = createTestSubgraphNode(nestedSubgraph, { id: 119 })
+    hostSubgraph.add(activeAliasNode)
+    hostSubgraph.add(staleAliasNode)
+
+    activeAliasNode._internalConfigureAfterSlots()
+    staleAliasNode._internalConfigureAfterSlots()
+    hostSubgraph.inputNode.slots[0].connect(
+      activeAliasNode.inputs[0],
+      activeAliasNode
+    )
+
+    const hostSubgraphNode = createTestSubgraphNode(hostSubgraph, { id: 120 })
+    hostSubgraphNode.graph?.add(hostSubgraphNode)
+
+    setPromotions(hostSubgraphNode, [
+      [String(activeAliasNode.id), 'string_a'],
+      [String(staleAliasNode.id), 'string_a']
+    ])
+
+    const serialized = hostSubgraphNode.serialize()
+    const restoredNode = createTestSubgraphNode(hostSubgraph, { id: 121 })
+    restoredNode.configure({
+      ...serialized,
+      id: restoredNode.id,
+      type: hostSubgraph.id,
+      inputs: []
+    })
+
+    const restoredPromotions = usePromotionStore().getPromotions(
+      restoredNode.rootGraph.id,
+      restoredNode.id
+    )
+    expect(restoredPromotions).toStrictEqual([
+      {
+        interiorNodeId: String(activeAliasNode.id),
+        widgetName: 'string_a'
+      }
+    ])
+
+    const restoredWidgets = promotedWidgets(restoredNode)
+    expect(restoredWidgets).toHaveLength(1)
+    expect(restoredWidgets[0].sourceNodeId).toBe(String(activeAliasNode.id))
+  })
+
+  test('serialize syncs duplicate-name linked inputs by subgraph slot identity', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [
+        { name: 'seed', type: '*' },
+        { name: 'seed', type: '*' }
+      ]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 127 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const firstNode = new LGraphNode('FirstNode')
+    const firstInput = firstNode.addInput('seed', '*')
+    firstNode.addWidget('text', 'seed', 'first-initial', () => {})
+    firstInput.widget = { name: 'seed' }
+    subgraph.add(firstNode)
+
+    const secondNode = new LGraphNode('SecondNode')
+    const secondInput = secondNode.addInput('seed', '*')
+    secondNode.addWidget('text', 'seed', 'second-initial', () => {})
+    secondInput.widget = { name: 'seed' }
+    subgraph.add(secondNode)
+
+    subgraph.inputNode.slots[0].connect(firstInput, firstNode)
+    subgraph.inputNode.slots[1].connect(secondInput, secondNode)
+
+    const widgets = promotedWidgets(subgraphNode)
+    const firstView = widgets[0]
+    const secondView = widgets[1]
+    if (!firstView || !secondView)
+      throw new Error('Expected two linked promoted views')
+
+    firstView.value = 'first-updated'
+    secondView.value = 'second-updated'
+
+    expect(firstNode.widgets?.[0].value).toBe('first-updated')
+    expect(secondNode.widgets?.[0].value).toBe('second-updated')
+
+    subgraphNode.serialize()
+
+    expect(firstNode.widgets?.[0].value).toBe('first-updated')
+    expect(secondNode.widgets?.[0].value).toBe('second-updated')
+  })
+
+  test('renaming an input updates linked promoted view display names', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'seed', type: '*' }]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 128 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const linkedNode = new LGraphNode('LinkedNode')
+    const linkedInput = linkedNode.addInput('seed', '*')
+    linkedNode.addWidget('text', 'seed', 'value', () => {})
+    linkedInput.widget = { name: 'seed' }
+    subgraph.add(linkedNode)
+    subgraph.inputNode.slots[0].connect(linkedInput, linkedNode)
+
+    const beforeRename = promotedWidgets(subgraphNode)[0]
+    if (!beforeRename) throw new Error('Expected linked promoted view')
+    expect(beforeRename.name).toBe('seed')
+
+    const inputToRename = subgraph.inputs[0]
+    if (!inputToRename) throw new Error('Expected input to rename')
+    subgraph.renameInput(inputToRename, 'seed_renamed')
+
+    const afterRename = promotedWidgets(subgraphNode)[0]
+    if (!afterRename) throw new Error('Expected linked promoted view')
+    expect(afterRename.name).toBe('seed_renamed')
+  })
+
   test('caches view objects across getter calls (stable references)', () => {
     const [subgraphNode, innerNodes] = setupSubgraph(1)
     innerNodes[0].addWidget('text', 'widgetA', 'a', () => {})
@@ -701,6 +1195,236 @@ describe('SubgraphNode.widgets getter', () => {
     ])
   })
 
+  test('configure with empty serialized inputs keeps linked filtering active', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'string_a', type: '*' }]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 97 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const linkedNodeA = new LGraphNode('LinkedNodeA')
+    const linkedInputA = linkedNodeA.addInput('string_a', '*')
+    linkedNodeA.addWidget('text', 'string_a', 'a', () => {})
+    linkedInputA.widget = { name: 'string_a' }
+    subgraph.add(linkedNodeA)
+
+    const linkedNodeB = new LGraphNode('LinkedNodeB')
+    const linkedInputB = linkedNodeB.addInput('string_a', '*')
+    linkedNodeB.addWidget('text', 'string_a', 'b', () => {})
+    linkedInputB.widget = { name: 'string_a' }
+    subgraph.add(linkedNodeB)
+
+    const storeOnlyNode = new LGraphNode('StoreOnlyNode')
+    storeOnlyNode.addWidget('text', 'string_a', 'independent', () => {})
+    subgraph.add(storeOnlyNode)
+
+    subgraph.inputNode.slots[0].connect(linkedInputA, linkedNodeA)
+    subgraph.inputNode.slots[0].connect(linkedInputB, linkedNodeB)
+
+    setPromotions(subgraphNode, [
+      [String(linkedNodeA.id), 'string_a'],
+      [String(linkedNodeB.id), 'string_a'],
+      [String(storeOnlyNode.id), 'string_a']
+    ])
+
+    const serialized = subgraphNode.serialize()
+    const restoredNode = createTestSubgraphNode(subgraph, { id: 98 })
+    restoredNode.configure({
+      ...serialized,
+      id: restoredNode.id,
+      type: subgraph.id,
+      inputs: []
+    })
+
+    const restoredWidgets = promotedWidgets(restoredNode)
+    expect(restoredWidgets).toHaveLength(2)
+
+    const linkedViewCount = restoredWidgets.filter((widget) =>
+      [String(linkedNodeA.id), String(linkedNodeB.id)].includes(
+        widget.sourceNodeId
+      )
+    ).length
+    expect(linkedViewCount).toBe(1)
+    expect(
+      restoredWidgets.some(
+        (widget) => widget.sourceNodeId === String(storeOnlyNode.id)
+      )
+    ).toBe(true)
+  })
+
+  test('configure with serialized inputs rebinds subgraph slots for linked filtering', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'string_a', type: '*' }]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 107 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const linkedNodeA = new LGraphNode('LinkedNodeA')
+    const linkedInputA = linkedNodeA.addInput('string_a', '*')
+    linkedNodeA.addWidget('text', 'string_a', 'a', () => {})
+    linkedInputA.widget = { name: 'string_a' }
+    subgraph.add(linkedNodeA)
+
+    const linkedNodeB = new LGraphNode('LinkedNodeB')
+    const linkedInputB = linkedNodeB.addInput('string_a', '*')
+    linkedNodeB.addWidget('text', 'string_a', 'b', () => {})
+    linkedInputB.widget = { name: 'string_a' }
+    subgraph.add(linkedNodeB)
+
+    const storeOnlyNode = new LGraphNode('StoreOnlyNode')
+    storeOnlyNode.addWidget('text', 'string_a', 'independent', () => {})
+    subgraph.add(storeOnlyNode)
+
+    subgraph.inputNode.slots[0].connect(linkedInputA, linkedNodeA)
+    subgraph.inputNode.slots[0].connect(linkedInputB, linkedNodeB)
+
+    setPromotions(subgraphNode, [
+      [String(linkedNodeA.id), 'string_a'],
+      [String(linkedNodeB.id), 'string_a'],
+      [String(storeOnlyNode.id), 'string_a']
+    ])
+
+    const serialized = subgraphNode.serialize()
+    const restoredNode = createTestSubgraphNode(subgraph, { id: 108 })
+    restoredNode.configure({
+      ...serialized,
+      id: restoredNode.id,
+      type: subgraph.id,
+      inputs: [
+        {
+          name: 'string_a',
+          type: '*',
+          link: null
+        }
+      ]
+    })
+
+    const restoredWidgets = promotedWidgets(restoredNode)
+    expect(restoredWidgets).toHaveLength(2)
+
+    const linkedViewCount = restoredWidgets.filter((widget) =>
+      [String(linkedNodeA.id), String(linkedNodeB.id)].includes(
+        widget.sourceNodeId
+      )
+    ).length
+    expect(linkedViewCount).toBe(1)
+    expect(
+      restoredWidgets.some(
+        (widget) => widget.sourceNodeId === String(storeOnlyNode.id)
+      )
+    ).toBe(true)
+  })
+
+  test('fixture keeps earliest linked representative and independent promotion only', () => {
+    const { graph, hostNode } = setupComplexPromotionFixture()
+
+    const hostWidgets = promotedWidgets(hostNode)
+    expect(hostWidgets).toHaveLength(2)
+    expect(hostWidgets.map((widget) => widget.sourceNodeId)).toStrictEqual([
+      '20',
+      '19'
+    ])
+
+    const promotions = usePromotionStore().getPromotions(graph.id, hostNode.id)
+    expect(promotions).toStrictEqual([
+      { interiorNodeId: '20', widgetName: 'string_a' },
+      { interiorNodeId: '19', widgetName: 'string_a' }
+    ])
+
+    const linkedView = hostWidgets[0]
+    const independentView = hostWidgets[1]
+    if (!linkedView || !independentView)
+      throw new Error('Expected linked and independent promoted widgets')
+
+    independentView.value = 'independent-value'
+    linkedView.value = 'shared-linked'
+
+    const widgetStore = useWidgetValueStore()
+    const getValue = (nodeId: string) =>
+      widgetStore.getWidget(graph.id, stripGraphPrefix(nodeId), 'string_a')
+        ?.value
+
+    expect(getValue('20')).toBe('shared-linked')
+    expect(getValue('18')).toBe('shared-linked')
+    expect(getValue('19')).toBe('independent-value')
+  })
+
+  test('fixture refreshes duplicate fallback after linked representative recovers', () => {
+    const { subgraph, hostNode } = setupComplexPromotionFixture()
+
+    const earliestLinkedNode = subgraph.getNodeById(20)
+    if (!earliestLinkedNode?.widgets)
+      throw new Error('Expected fixture to contain node 20 with widgets')
+
+    const originalWidgets = earliestLinkedNode.widgets
+    earliestLinkedNode.widgets = originalWidgets.filter(
+      (widget) => widget.name !== 'string_a'
+    )
+
+    const unresolvedWidgets = promotedWidgets(hostNode)
+    expect(
+      unresolvedWidgets.map((widget) => widget.sourceNodeId)
+    ).toStrictEqual(['18', '20', '19'])
+
+    earliestLinkedNode.widgets = originalWidgets
+
+    const restoredWidgets = promotedWidgets(hostNode)
+    expect(restoredWidgets.map((widget) => widget.sourceNodeId)).toStrictEqual([
+      '20',
+      '19'
+    ])
+  })
+
+  test('fixture converges external widgets and keeps rendered value isolation after transient linked fallback churn', () => {
+    const { subgraph, hostNode } = setupComplexPromotionFixture()
+
+    const initialWidgets = promotedWidgets(hostNode)
+    expect(initialWidgets.map((widget) => widget.sourceNodeId)).toStrictEqual([
+      '20',
+      '19'
+    ])
+
+    const earliestLinkedNode = subgraph.getNodeById(20)
+    if (!earliestLinkedNode?.widgets)
+      throw new Error('Expected fixture to contain node 20 with widgets')
+
+    const originalWidgets = earliestLinkedNode.widgets
+    earliestLinkedNode.widgets = originalWidgets.filter(
+      (widget) => widget.name !== 'string_a'
+    )
+
+    const transientWidgets = promotedWidgets(hostNode)
+    expect(transientWidgets.map((widget) => widget.sourceNodeId)).toStrictEqual(
+      ['18', '20', '19']
+    )
+
+    earliestLinkedNode.widgets = originalWidgets
+
+    const finalWidgets = promotedWidgets(hostNode)
+    expect(finalWidgets).toHaveLength(2)
+    expect(finalWidgets.map((widget) => widget.sourceNodeId)).toStrictEqual([
+      '20',
+      '19'
+    ])
+
+    const finalLinkedView = finalWidgets.find(
+      (widget) => widget.sourceNodeId === '20'
+    )
+    const finalIndependentView = finalWidgets.find(
+      (widget) => widget.sourceNodeId === '19'
+    )
+    if (!finalLinkedView || !finalIndependentView)
+      throw new Error('Expected final rendered linked and independent views')
+
+    finalIndependentView.value = 'independent-final'
+    expect(finalIndependentView.value).toBe('independent-final')
+    expect(finalLinkedView.value).not.toBe('independent-final')
+
+    finalLinkedView.value = 'linked-final'
+    expect(finalLinkedView.value).toBe('linked-final')
+    expect(finalIndependentView.value).toBe('independent-final')
+  })
+
   test('clone output preserves proxyWidgets for promotion hydration', () => {
     const [subgraphNode, innerNodes] = setupSubgraph(1)
     const innerNode = firstInnerNode(innerNodes)
@@ -751,6 +1475,103 @@ describe('widgets getter caching', () => {
     setActivePinia(createTestingPinia({ stubActions: false }))
   })
 
+  test('reconciles at most once per canvas frame across repeated widgets reads', () => {
+    const [subgraphNode, innerNodes] = setupSubgraph(1)
+    innerNodes[0].addWidget('text', 'widgetA', 'a', () => {})
+    setPromotions(subgraphNode, [['1', 'widgetA']])
+
+    const fakeCanvas = { frame: 12 } as Pick<LGraphCanvas, 'frame'>
+    subgraphNode.rootGraph.primaryCanvas = fakeCanvas as LGraphCanvas
+
+    const reconcileSpy = vi.spyOn(
+      subgraphNode as unknown as {
+        _buildPromotionReconcileState: (
+          entries: Array<{ interiorNodeId: string; widgetName: string }>,
+          linkedEntries: Array<{
+            inputName: string
+            inputKey: string
+            interiorNodeId: string
+            widgetName: string
+          }>
+        ) => unknown
+      },
+      '_buildPromotionReconcileState'
+    )
+
+    void subgraphNode.widgets
+    void subgraphNode.widgets
+    void subgraphNode.widgets
+
+    expect(reconcileSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('does not re-run reconciliation when only canvas frame advances', () => {
+    const [subgraphNode, innerNodes] = setupSubgraph(1)
+    innerNodes[0].addWidget('text', 'widgetA', 'a', () => {})
+    setPromotions(subgraphNode, [['1', 'widgetA']])
+
+    const fakeCanvas = { frame: 24 } as Pick<LGraphCanvas, 'frame'>
+    subgraphNode.rootGraph.primaryCanvas = fakeCanvas as LGraphCanvas
+
+    const reconcileSpy = vi.spyOn(
+      subgraphNode as unknown as {
+        _buildPromotionReconcileState: (
+          entries: Array<{ interiorNodeId: string; widgetName: string }>,
+          linkedEntries: Array<{
+            inputName: string
+            inputKey: string
+            interiorNodeId: string
+            widgetName: string
+          }>
+        ) => unknown
+      },
+      '_buildPromotionReconcileState'
+    )
+
+    void subgraphNode.widgets
+    fakeCanvas.frame += 1
+    void subgraphNode.widgets
+
+    expect(reconcileSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('does not re-resolve linked entries when linked input state is unchanged', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'string_a', type: '*' }]
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 97 })
+    subgraphNode.graph?.add(subgraphNode)
+
+    const linkedNodeA = new LGraphNode('LinkedNodeA')
+    const linkedInputA = linkedNodeA.addInput('string_a', '*')
+    linkedNodeA.addWidget('text', 'string_a', 'a', () => {})
+    linkedInputA.widget = { name: 'string_a' }
+    subgraph.add(linkedNodeA)
+
+    const linkedNodeB = new LGraphNode('LinkedNodeB')
+    const linkedInputB = linkedNodeB.addInput('string_a', '*')
+    linkedNodeB.addWidget('text', 'string_a', 'b', () => {})
+    linkedInputB.widget = { name: 'string_a' }
+    subgraph.add(linkedNodeB)
+
+    subgraph.inputNode.slots[0].connect(linkedInputA, linkedNodeA)
+    subgraph.inputNode.slots[0].connect(linkedInputB, linkedNodeB)
+
+    const resolveSpy = vi.spyOn(
+      subgraphNode as unknown as {
+        _resolveLinkedPromotionBySubgraphInput: (...args: unknown[]) => unknown
+      },
+      '_resolveLinkedPromotionBySubgraphInput'
+    )
+
+    void subgraphNode.widgets
+    const initialResolveCount = resolveSpy.mock.calls.length
+    expect(initialResolveCount).toBeLessThanOrEqual(1)
+
+    void subgraphNode.widgets
+    expect(resolveSpy).toHaveBeenCalledTimes(initialResolveCount)
+  })
+
   test('preserves view identities when promotion order changes', () => {
     const [subgraphNode, innerNodes] = setupSubgraph(1)
     innerNodes[0].addWidget('text', 'widgetA', 'a', () => {})

src/core/graph/subgraph/promotedWidgetView.ts

@@ -1,4 +1,4 @@
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 import type { CanvasPointer } from '@/lib/litegraph/src/CanvasPointer'
 import type { Point } from '@/lib/litegraph/src/interfaces'
@@ -13,11 +13,15 @@ import {
   stripGraphPrefix,
   useWidgetValueStore
 } from '@/stores/widgetValueStore'
+import type { WidgetState } from '@/stores/widgetValueStore'
 import {
   resolveConcretePromotedWidget,
   resolvePromotedWidgetAtHost
 } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
+import { matchPromotedInput } from '@/core/graph/subgraph/matchPromotedInput'
+import { hasWidgetNode } from '@/core/graph/subgraph/widgetNodeTypeGuard'
 
+import { isPromotedWidgetView } from './promotedWidgetTypes'
 import type { PromotedWidgetView as IPromotedWidgetView } from './promotedWidgetTypes'
 
 export type { PromotedWidgetView } from './promotedWidgetTypes'
@@ -131,6 +135,38 @@ class PromotedWidgetView implements IPromotedWidgetView {
   }
 
   set value(value: IBaseWidget['value']) {
+    const linkedWidgets = this.getLinkedInputWidgets()
+    if (linkedWidgets.length > 0) {
+      const widgetStore = useWidgetValueStore()
+      let didUpdateState = false
+      for (const linkedWidget of linkedWidgets) {
+        const state = widgetStore.getWidget(
+          this.graphId,
+          linkedWidget.nodeId,
+          linkedWidget.widgetName
+        )
+        if (state) {
+          state.value = value
+          didUpdateState = true
+        }
+      }
+
+      const resolved = this.resolveDeepest()
+      if (resolved) {
+        const resolvedState = widgetStore.getWidget(
+          this.graphId,
+          stripGraphPrefix(String(resolved.node.id)),
+          resolved.widget.name
+        )
+        if (resolvedState) {
+          resolvedState.value = value
+          didUpdateState = true
+        }
+      }
+
+      if (didUpdateState) return
+    }
+
     const state = this.getWidgetState()
     if (state) {
       state.value = value
@@ -278,6 +314,9 @@ class PromotedWidgetView implements IPromotedWidgetView {
   }
 
   private getWidgetState() {
+    const linkedState = this.getLinkedInputWidgetStates()[0]
+    if (linkedState) return linkedState
+
     const resolved = this.resolveDeepest()
     if (!resolved) return undefined
     return useWidgetValueStore().getWidget(
@@ -287,6 +326,57 @@ class PromotedWidgetView implements IPromotedWidgetView {
     )
   }
 
+  private getLinkedInputWidgets(): Array<{
+    nodeId: NodeId
+    widgetName: string
+    widget: IBaseWidget
+  }> {
+    const linkedInputSlot = this.subgraphNode.inputs.find((input) => {
+      if (!input._subgraphSlot) return false
+      if (matchPromotedInput([input], this) !== input) return false
+
+      const boundWidget = input._widget
+      if (boundWidget === this) return true
+
+      if (boundWidget && isPromotedWidgetView(boundWidget)) {
+        return (
+          boundWidget.sourceNodeId === this.sourceNodeId &&
+          boundWidget.sourceWidgetName === this.sourceWidgetName
+        )
+      }
+
+      return input._subgraphSlot
+        .getConnectedWidgets()
+        .filter(hasWidgetNode)
+        .some(
+          (widget) =>
+            String(widget.node.id) === this.sourceNodeId &&
+            widget.name === this.sourceWidgetName
+        )
+    })
+    const linkedInput = linkedInputSlot?._subgraphSlot
+    if (!linkedInput) return []
+
+    return linkedInput
+      .getConnectedWidgets()
+      .filter(hasWidgetNode)
+      .map((widget) => ({
+        nodeId: stripGraphPrefix(String(widget.node.id)),
+        widgetName: widget.name,
+        widget
+      }))
+  }
+
+  private getLinkedInputWidgetStates(): WidgetState[] {
+    const widgetStore = useWidgetValueStore()
+
+    return this.getLinkedInputWidgets()
+      .map(({ nodeId, widgetName }) =>
+        widgetStore.getWidget(this.graphId, nodeId, widgetName)
+      )
+      .filter((state): state is WidgetState => state !== undefined)
+  }
+
   private getProjectedWidget(resolved: {
     node: LGraphNode
     widget: IBaseWidget

src/core/graph/subgraph/widgetNodeTypeGuard.ts

@@ -0,0 +1,8 @@
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+
+export function hasWidgetNode(
+  widget: IBaseWidget
+): widget is IBaseWidget & { node: LGraphNode } {
+  return 'node' in widget && !!widget.node
+}

src/core/graph/subgraph/widgetRenderKey.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+
+import { getStableWidgetRenderKey } from './widgetRenderKey'
+
+function createWidget(overrides: Partial<IBaseWidget> = {}): IBaseWidget {
+  return {
+    name: 'seed',
+    type: 'number',
+    ...overrides
+  } as IBaseWidget
+}
+
+describe(getStableWidgetRenderKey, () => {
+  it('returns a stable key for the same widget instance', () => {
+    const widget = createWidget()
+
+    const first = getStableWidgetRenderKey(widget)
+    const second = getStableWidgetRenderKey(widget)
+
+    expect(second).toBe(first)
+  })
+
+  it('returns distinct keys for distinct widget instances', () => {
+    const firstWidget = createWidget()
+    const secondWidget = createWidget()
+
+    const firstKey = getStableWidgetRenderKey(firstWidget)
+    const secondKey = getStableWidgetRenderKey(secondWidget)
+
+    expect(secondKey).not.toBe(firstKey)
+  })
+})

src/core/graph/subgraph/widgetRenderKey.ts

@@ -0,0 +1,17 @@
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+
+const widgetRenderKeys = new WeakMap<IBaseWidget, string>()
+let nextWidgetRenderKeyId = 0
+
+export function getStableWidgetRenderKey(widget: IBaseWidget): string {
+  const cachedKey = widgetRenderKeys.get(widget)
+  if (cachedKey) return cachedKey
+
+  const prefix = isPromotedWidgetView(widget) ? 'promoted' : 'widget'
+  const key = `${prefix}:${nextWidgetRenderKeyId++}`
+
+  widgetRenderKeys.set(widget, key)
+  return key
+}

src/lib/litegraph/src/LGraphCanvas.ts

@@ -4141,6 +4141,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
         item.setPos(item.pos[0] + dx, item.pos[1] + dy)
       } else if (item instanceof Reroute) {
         item.move(dx, dy)
+      } else if (item instanceof LGraphGroup) {
+        item.move(dx, dy, true)
       }
     }
 

src/lib/litegraph/src/strings.ts

@@ -12,6 +12,9 @@ export function parseSlotTypes(type: ISlotType): string[] {
  * @param name The name to make unique
  * @param existingNames The names that already exist. Default: an empty array
  * @returns The name, or a unique name if it already exists.
+ * @remark Used by SubgraphInputNode to deduplicate input names when promoting
+ * the same widget name from multiple node instances (e.g. `seed` → `seed_1`).
+ * Extensions matching by slot name should account for the `_N` suffix.
  */
 export function nextUniqueName(
   name: string,

src/lib/litegraph/src/subgraph/SubgraphIO.test.ts

@@ -4,6 +4,7 @@ import { describe, expect, it } from 'vitest'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { ToInputFromIoNodeLink } from '@/lib/litegraph/src/canvas/ToInputFromIoNodeLink'
 import { LinkDirection } from '@/lib/litegraph/src//types/globalEnums'
+import { usePromotionStore } from '@/stores/promotionStore'
 
 import { subgraphTest } from './__fixtures__/subgraphFixtures'
 import {
@@ -456,4 +457,50 @@ describe('SubgraphIO - Empty Slot Connection', () => {
       expect(link.origin_slot).toBe(1) // Should be the second slot
     }
   )
+
+  subgraphTest(
+    'creates distinct named inputs when promoting same widget name from multiple node instances',
+    ({ subgraphWithNode }) => {
+      const { subgraph, subgraphNode } = subgraphWithNode
+
+      const firstNode = new LGraphNode('First Seed Node')
+      const firstInput = firstNode.addInput('seed', 'number')
+      firstNode.addWidget('number', 'seed', 1, () => undefined)
+      firstInput.widget = { name: 'seed' }
+      subgraph.add(firstNode)
+
+      const secondNode = new LGraphNode('Second Seed Node')
+      const secondInput = secondNode.addInput('seed', 'number')
+      secondNode.addWidget('number', 'seed', 2, () => undefined)
+      secondInput.widget = { name: 'seed' }
+      subgraph.add(secondNode)
+
+      subgraph.inputNode.connectByType(-1, firstNode, 'number')
+      subgraph.inputNode.connectByType(-1, secondNode, 'number')
+
+      expect(subgraph.inputs.map((input) => input.name)).toStrictEqual([
+        'input',
+        'seed',
+        'seed_1'
+      ])
+      expect(subgraphNode.inputs.map((input) => input.name)).toStrictEqual([
+        'input',
+        'seed',
+        'seed_1'
+      ])
+      expect(subgraphNode.widgets.map((widget) => widget.name)).toStrictEqual([
+        'seed',
+        'seed_1'
+      ])
+      expect(
+        usePromotionStore().getPromotions(
+          subgraphNode.rootGraph.id,
+          subgraphNode.id
+        )
+      ).toStrictEqual([
+        { interiorNodeId: String(firstNode.id), widgetName: 'seed' },
+        { interiorNodeId: String(secondNode.id), widgetName: 'seed' }
+      ])
+    }
+  )
 })

src/lib/litegraph/src/subgraph/SubgraphInputNode.ts

@@ -15,6 +15,7 @@ import type { NodeLike } from '@/lib/litegraph/src/types/NodeLike'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
 import { findFreeSlotOfType } from '@/lib/litegraph/src/utils/collections'
+import { nextUniqueName } from '@/lib/litegraph/src/strings'
 
 import { EmptySubgraphInput } from './EmptySubgraphInput'
 import { SubgraphIONodeBase } from './SubgraphIONodeBase'
@@ -130,8 +131,10 @@ export class SubgraphInputNode
     if (slot === -1) {
       // This indicates a connection is being made from the "Empty" slot.
       // We need to create a new, concrete input on the subgraph that matches the target.
+      const existingNames = this.subgraph.inputs.map((input) => input.name)
+      const uniqueName = nextUniqueName(inputSlot.slot.name, existingNames)
       const newSubgraphInput = this.subgraph.addInput(
-        inputSlot.slot.name,
+        uniqueName,
         String(inputSlot.slot.type ?? '')
       )
       const newSlotIndex = this.slots.indexOf(newSubgraphInput)

src/lib/litegraph/src/subgraph/SubgraphNode.test.ts

@@ -6,6 +6,8 @@
  * IO synchronization, and edge cases.
  */
 import { describe, expect, it, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
 
 import type { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
@@ -615,3 +617,35 @@ describe.skip('SubgraphNode Cleanup', () => {
     expect(abortSpy2).toHaveBeenCalledTimes(1)
   })
 })
+
+describe('SubgraphNode promotion view keys', () => {
+  it('distinguishes tuples that differ only by colon placement', () => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+
+    const subgraph = createTestSubgraph()
+    const subgraphNode = createTestSubgraphNode(subgraph)
+    const nodeWithKeyBuilder = subgraphNode as unknown as {
+      _makePromotionViewKey: (
+        inputKey: string,
+        interiorNodeId: string,
+        widgetName: string,
+        inputName?: string
+      ) => string
+    }
+
+    const firstKey = nodeWithKeyBuilder._makePromotionViewKey(
+      '65',
+      '18',
+      'a:b',
+      'c'
+    )
+    const secondKey = nodeWithKeyBuilder._makePromotionViewKey(
+      '65',
+      '18',
+      'a',
+      'b:c'
+    )
+
+    expect(firstKey).not.toBe(secondKey)
+  })
+})

src/lib/litegraph/src/subgraph/SubgraphNode.ts

@@ -27,6 +27,7 @@ import type {
   ExportedSubgraphInstance,
   ISerialisedNode
 } from '@/lib/litegraph/src/types/serialisation'
+import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
 import {
@@ -34,7 +35,9 @@ import {
   isPromotedWidgetView
 } from '@/core/graph/subgraph/promotedWidgetView'
 import type { PromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetView'
+import { resolveConcretePromotedWidget } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
 import { resolveSubgraphInputTarget } from '@/core/graph/subgraph/resolveSubgraphInputTarget'
+import { hasWidgetNode } from '@/core/graph/subgraph/widgetNodeTypeGuard'
 import { parseProxyWidgets } from '@/core/schemas/promotionSchema'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { usePromotionStore } from '@/stores/promotionStore'
@@ -51,6 +54,12 @@ workflowSvg.src =
 
 type LinkedPromotionEntry = {
   inputName: string
+  inputKey: string
+  interiorNodeId: string
+  widgetName: string
+}
+
+type PromotionEntry = {
   interiorNodeId: string
   widgetName: string
 }
@@ -90,46 +99,113 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
    * `onAdded()`, so construction-time promotions require normal add-to-graph
    * lifecycle to persist.
    */
-  private _pendingPromotions: Array<{
-    interiorNodeId: string
-    widgetName: string
-  }> = []
+  private _pendingPromotions: PromotionEntry[] = []
+  private _cacheVersion = 0
+  private _linkedEntriesCache?: {
+    version: number
+    hasMissingBoundSourceWidget: boolean
+    entries: LinkedPromotionEntry[]
+  }
+  private _promotedViewsCache?: {
+    version: number
+    entriesRef: PromotionEntry[]
+    hasMissingBoundSourceWidget: boolean
+    views: PromotedWidgetView[]
+  }
 
   // Declared as accessor via Object.defineProperty in constructor.
   // TypeScript doesn't allow overriding a property with get/set syntax,
   // so we use declare + defineProperty instead.
   declare widgets: IBaseWidget[]
 
-  private _resolveLinkedPromotionByInputName(
-    inputName: string
+  private _resolveLinkedPromotionBySubgraphInput(
+    subgraphInput: SubgraphInput
   ): { interiorNodeId: string; widgetName: string } | undefined {
-    const resolvedTarget = resolveSubgraphInputTarget(this, inputName)
-    if (!resolvedTarget) return undefined
+    // Preserve deterministic representative selection for multi-linked inputs:
+    // the first connected source remains the promoted linked view.
+    for (const linkId of subgraphInput.linkIds) {
+      const link = this.subgraph.getLink(linkId)
+      if (!link) continue
 
-    return {
-      interiorNodeId: resolvedTarget.nodeId,
-      widgetName: resolvedTarget.widgetName
+      const { inputNode } = link.resolve(this.subgraph)
+      if (!inputNode || !Array.isArray(inputNode.inputs)) continue
+
+      const targetInput = inputNode.inputs.find(
+        (entry) => entry.link === linkId
+      )
+      if (!targetInput) continue
+
+      const targetWidget = inputNode.getWidgetFromSlot(targetInput)
+      if (!targetWidget) continue
+
+      if (inputNode.isSubgraphNode())
+        return {
+          interiorNodeId: String(inputNode.id),
+          widgetName: targetInput.name
+        }
+
+      return {
+        interiorNodeId: String(inputNode.id),
+        widgetName: targetWidget.name
+      }
     }
   }
 
-  private _getLinkedPromotionEntries(): LinkedPromotionEntry[] {
+  private _getLinkedPromotionEntries(cache = true): LinkedPromotionEntry[] {
+    const hasMissingBoundSourceWidget = this._hasMissingBoundSourceWidget()
+    const cached = this._linkedEntriesCache
+    if (
+      cache &&
+      cached?.version === this._cacheVersion &&
+      cached.hasMissingBoundSourceWidget === hasMissingBoundSourceWidget
+    )
+      return cached.entries
+
     const linkedEntries: LinkedPromotionEntry[] = []
 
-    // TODO(pr9282): Optimization target. This path runs on widgets getter reads
-    // and resolves each input link chain eagerly.
     for (const input of this.inputs) {
-      const resolved = this._resolveLinkedPromotionByInputName(input.name)
+      const subgraphInput = input._subgraphSlot
+      if (!subgraphInput) continue
+
+      const boundWidget =
+        input._widget && isPromotedWidgetView(input._widget)
+          ? input._widget
+          : undefined
+      if (boundWidget) {
+        const boundNode = this.subgraph.getNodeById(boundWidget.sourceNodeId)
+        const hasBoundSourceWidget =
+          boundNode?.widgets?.some(
+            (widget) => widget.name === boundWidget.sourceWidgetName
+          ) === true
+        if (hasBoundSourceWidget) {
+          linkedEntries.push({
+            inputName: input.label ?? input.name,
+            inputKey: String(subgraphInput.id),
+            interiorNodeId: boundWidget.sourceNodeId,
+            widgetName: boundWidget.sourceWidgetName
+          })
+          continue
+        }
+      }
+
+      const resolved =
+        this._resolveLinkedPromotionBySubgraphInput(subgraphInput)
       if (!resolved) continue
 
-      linkedEntries.push({ inputName: input.name, ...resolved })
+      linkedEntries.push({
+        inputName: input.label ?? input.name,
+        inputKey: String(subgraphInput.id),
+        ...resolved
+      })
     }
 
     const seenEntryKeys = new Set<string>()
     const deduplicatedEntries = linkedEntries.filter((entry) => {
       const entryKey = this._makePromotionViewKey(
-        entry.inputName,
+        entry.inputKey,
         entry.interiorNodeId,
-        entry.widgetName
+        entry.widgetName,
+        entry.inputName
       )
       if (seenEntryKeys.has(entryKey)) return false
 
@@ -137,24 +213,73 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
       return true
     })
 
+    if (cache)
+      this._linkedEntriesCache = {
+        version: this._cacheVersion,
+        hasMissingBoundSourceWidget,
+        entries: deduplicatedEntries
+      }
+
     return deduplicatedEntries
   }
 
+  private _hasMissingBoundSourceWidget(): boolean {
+    return this.inputs.some((input) => {
+      const boundWidget =
+        input._widget && isPromotedWidgetView(input._widget)
+          ? input._widget
+          : undefined
+      if (!boundWidget) return false
+
+      const boundNode = this.subgraph.getNodeById(boundWidget.sourceNodeId)
+      return (
+        boundNode?.widgets?.some(
+          (widget) => widget.name === boundWidget.sourceWidgetName
+        ) !== true
+      )
+    })
+  }
+
   private _getPromotedViews(): PromotedWidgetView[] {
     const store = usePromotionStore()
     const entries = store.getPromotionsRef(this.rootGraph.id, this.id)
+    const hasMissingBoundSourceWidget = this._hasMissingBoundSourceWidget()
+    const cachedViews = this._promotedViewsCache
+    if (
+      cachedViews?.version === this._cacheVersion &&
+      cachedViews.entriesRef === entries &&
+      cachedViews.hasMissingBoundSourceWidget === hasMissingBoundSourceWidget
+    )
+      return cachedViews.views
+
     const linkedEntries = this._getLinkedPromotionEntries()
+
     const { displayNameByViewKey, reconcileEntries } =
       this._buildPromotionReconcileState(entries, linkedEntries)
 
-    return this._promotedViewManager.reconcile(reconcileEntries, (entry) =>
-      createPromotedWidgetView(
-        this,
-        entry.interiorNodeId,
-        entry.widgetName,
-        entry.viewKey ? displayNameByViewKey.get(entry.viewKey) : undefined
-      )
+    const views = this._promotedViewManager.reconcile(
+      reconcileEntries,
+      (entry) =>
+        createPromotedWidgetView(
+          this,
+          entry.interiorNodeId,
+          entry.widgetName,
+          entry.viewKey ? displayNameByViewKey.get(entry.viewKey) : undefined
+        )
     )
+
+    this._promotedViewsCache = {
+      version: this._cacheVersion,
+      entriesRef: entries,
+      hasMissingBoundSourceWidget,
+      views
+    }
+
+    return views
+  }
+
+  private _invalidatePromotedViewsCache(): void {
+    this._cacheVersion++
   }
 
   private _syncPromotions(): void {
@@ -162,10 +287,13 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
 
     const store = usePromotionStore()
     const entries = store.getPromotionsRef(this.rootGraph.id, this.id)
-    const linkedEntries = this._getLinkedPromotionEntries()
-    const { mergedEntries, shouldPersistLinkedOnly } =
-      this._buildPromotionPersistenceState(entries, linkedEntries)
-    if (!shouldPersistLinkedOnly) return
+    const linkedEntries = this._getLinkedPromotionEntries(false)
+    // Intentionally preserve independent store promotions when linked coverage is partial;
+    // tests assert that mixed linked/independent states must not collapse to linked-only.
+    const { mergedEntries } = this._buildPromotionPersistenceState(
+      entries,
+      linkedEntries
+    )
 
     const hasChanged =
       mergedEntries.length !== entries.length ||
@@ -180,7 +308,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
   }
 
   private _buildPromotionReconcileState(
-    entries: Array<{ interiorNodeId: string; widgetName: string }>,
+    entries: PromotionEntry[],
     linkedEntries: LinkedPromotionEntry[]
   ): {
     displayNameByViewKey: Map<string, string>
@@ -196,48 +324,64 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     )
     const linkedReconcileEntries =
       this._buildLinkedReconcileEntries(linkedEntries)
-    const shouldPersistLinkedOnly = this._shouldPersistLinkedOnly(linkedEntries)
+    const shouldPersistLinkedOnly = this._shouldPersistLinkedOnly(
+      linkedEntries,
+      fallbackStoredEntries
+    )
+    const reconcileEntries = shouldPersistLinkedOnly
+      ? linkedReconcileEntries
+      : [...linkedReconcileEntries, ...fallbackStoredEntries]
 
     return {
       displayNameByViewKey: this._buildDisplayNameByViewKey(linkedEntries),
-      reconcileEntries: shouldPersistLinkedOnly
-        ? linkedReconcileEntries
-        : [...linkedReconcileEntries, ...fallbackStoredEntries]
+      reconcileEntries
     }
   }
 
   private _buildPromotionPersistenceState(
-    entries: Array<{ interiorNodeId: string; widgetName: string }>,
+    entries: PromotionEntry[],
     linkedEntries: LinkedPromotionEntry[]
   ): {
-    mergedEntries: Array<{ interiorNodeId: string; widgetName: string }>
-    shouldPersistLinkedOnly: boolean
+    mergedEntries: PromotionEntry[]
   } {
     const { linkedPromotionEntries, fallbackStoredEntries } =
       this._collectLinkedAndFallbackEntries(entries, linkedEntries)
-    const shouldPersistLinkedOnly = this._shouldPersistLinkedOnly(linkedEntries)
+    const shouldPersistLinkedOnly = this._shouldPersistLinkedOnly(
+      linkedEntries,
+      fallbackStoredEntries
+    )
 
     return {
       mergedEntries: shouldPersistLinkedOnly
         ? linkedPromotionEntries
-        : [...linkedPromotionEntries, ...fallbackStoredEntries],
-      shouldPersistLinkedOnly
+        : [...linkedPromotionEntries, ...fallbackStoredEntries]
     }
   }
 
   private _collectLinkedAndFallbackEntries(
-    entries: Array<{ interiorNodeId: string; widgetName: string }>,
+    entries: PromotionEntry[],
     linkedEntries: LinkedPromotionEntry[]
   ): {
-    linkedPromotionEntries: Array<{
-      interiorNodeId: string
-      widgetName: string
-    }>
-    fallbackStoredEntries: Array<{ interiorNodeId: string; widgetName: string }>
+    linkedPromotionEntries: PromotionEntry[]
+    fallbackStoredEntries: PromotionEntry[]
   } {
     const linkedPromotionEntries = this._toPromotionEntries(linkedEntries)
-    const fallbackStoredEntries = this._getFallbackStoredEntries(
+    const excludedEntryKeys = new Set(
+      linkedPromotionEntries.map((entry) =>
+        this._makePromotionEntryKey(entry.interiorNodeId, entry.widgetName)
+      )
+    )
+    const connectedEntryKeys = this._getConnectedPromotionEntryKeys()
+    for (const key of connectedEntryKeys) {
+      excludedEntryKeys.add(key)
+    }
+
+    const prePruneFallbackStoredEntries = this._getFallbackStoredEntries(
       entries,
+      excludedEntryKeys
+    )
+    const fallbackStoredEntries = this._pruneStaleAliasFallbackEntries(
+      prePruneFallbackStoredEntries,
       linkedPromotionEntries
     )
 
@@ -248,14 +392,37 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
   }
 
   private _shouldPersistLinkedOnly(
-    linkedEntries: LinkedPromotionEntry[]
+    linkedEntries: LinkedPromotionEntry[],
+    fallbackStoredEntries: PromotionEntry[]
   ): boolean {
-    return this.inputs.length > 0 && linkedEntries.length === this.inputs.length
+    if (
+      !(this.inputs.length > 0 && linkedEntries.length === this.inputs.length)
+    )
+      return false
+
+    const linkedWidgetNames = new Set(
+      linkedEntries.map((entry) => entry.widgetName)
+    )
+
+    const hasFallbackToKeep = fallbackStoredEntries.some((entry) => {
+      const sourceNode = this.subgraph.getNodeById(entry.interiorNodeId)
+      const hasSourceWidget =
+        sourceNode?.widgets?.some(
+          (widget) => widget.name === entry.widgetName
+        ) === true
+      if (hasSourceWidget) return true
+
+      // If the fallback widget name overlaps a linked widget name, keep it
+      // until aliasing can be positively proven.
+      return linkedWidgetNames.has(entry.widgetName)
+    })
+
+    return !hasFallbackToKeep
   }
 
   private _toPromotionEntries(
     linkedEntries: LinkedPromotionEntry[]
-  ): Array<{ interiorNodeId: string; widgetName: string }> {
+  ): PromotionEntry[] {
     return linkedEntries.map(({ interiorNodeId, widgetName }) => ({
       interiorNodeId,
       widgetName
@@ -263,33 +430,98 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
   }
 
   private _getFallbackStoredEntries(
-    entries: Array<{ interiorNodeId: string; widgetName: string }>,
-    linkedPromotionEntries: Array<{
-      interiorNodeId: string
-      widgetName: string
-    }>
-  ): Array<{ interiorNodeId: string; widgetName: string }> {
-    const linkedKeys = new Set(
-      linkedPromotionEntries.map((entry) =>
-        this._makePromotionEntryKey(entry.interiorNodeId, entry.widgetName)
-      )
-    )
+    entries: PromotionEntry[],
+    excludedEntryKeys: Set<string>
+  ): PromotionEntry[] {
     return entries.filter(
       (entry) =>
-        !linkedKeys.has(
+        !excludedEntryKeys.has(
           this._makePromotionEntryKey(entry.interiorNodeId, entry.widgetName)
         )
     )
   }
 
+  private _pruneStaleAliasFallbackEntries(
+    fallbackStoredEntries: PromotionEntry[],
+    linkedPromotionEntries: PromotionEntry[]
+  ): PromotionEntry[] {
+    if (
+      fallbackStoredEntries.length === 0 ||
+      linkedPromotionEntries.length === 0
+    )
+      return fallbackStoredEntries
+
+    const linkedConcreteKeys = new Set(
+      linkedPromotionEntries
+        .map((entry) => this._resolveConcretePromotionEntryKey(entry))
+        .filter((key): key is string => key !== undefined)
+    )
+    if (linkedConcreteKeys.size === 0) return fallbackStoredEntries
+
+    const prunedEntries: PromotionEntry[] = []
+
+    for (const entry of fallbackStoredEntries) {
+      const concreteKey = this._resolveConcretePromotionEntryKey(entry)
+      if (concreteKey && linkedConcreteKeys.has(concreteKey)) continue
+
+      prunedEntries.push(entry)
+    }
+
+    return prunedEntries
+  }
+
+  private _resolveConcretePromotionEntryKey(
+    entry: PromotionEntry
+  ): string | undefined {
+    const result = resolveConcretePromotedWidget(
+      this,
+      entry.interiorNodeId,
+      entry.widgetName
+    )
+    if (result.status !== 'resolved') return undefined
+
+    return this._makePromotionEntryKey(
+      String(result.resolved.node.id),
+      result.resolved.widget.name
+    )
+  }
+
+  private _getConnectedPromotionEntryKeys(): Set<string> {
+    const connectedEntryKeys = new Set<string>()
+
+    for (const input of this.inputs) {
+      const subgraphInput = input._subgraphSlot
+      if (!subgraphInput) continue
+
+      const connectedWidgets = subgraphInput.getConnectedWidgets()
+
+      for (const widget of connectedWidgets) {
+        if (!hasWidgetNode(widget)) continue
+
+        connectedEntryKeys.add(
+          this._makePromotionEntryKey(String(widget.node.id), widget.name)
+        )
+      }
+    }
+
+    return connectedEntryKeys
+  }
+
   private _buildLinkedReconcileEntries(
     linkedEntries: LinkedPromotionEntry[]
   ): Array<{ interiorNodeId: string; widgetName: string; viewKey: string }> {
-    return linkedEntries.map(({ inputName, interiorNodeId, widgetName }) => ({
-      interiorNodeId,
-      widgetName,
-      viewKey: this._makePromotionViewKey(inputName, interiorNodeId, widgetName)
-    }))
+    return linkedEntries.map(
+      ({ inputKey, inputName, interiorNodeId, widgetName }) => ({
+        interiorNodeId,
+        widgetName,
+        viewKey: this._makePromotionViewKey(
+          inputKey,
+          interiorNodeId,
+          widgetName,
+          inputName
+        )
+      })
+    )
   }
 
   private _buildDisplayNameByViewKey(
@@ -298,9 +530,10 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     return new Map(
       linkedEntries.map((entry) => [
         this._makePromotionViewKey(
-          entry.inputName,
+          entry.inputKey,
           entry.interiorNodeId,
-          entry.widgetName
+          entry.widgetName,
+          entry.inputName
         ),
         entry.inputName
       ])
@@ -315,11 +548,12 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
   }
 
   private _makePromotionViewKey(
-    inputName: string,
+    inputKey: string,
     interiorNodeId: string,
-    widgetName: string
+    widgetName: string,
+    inputName = ''
   ): string {
-    return `${inputName}:${interiorNodeId}:${widgetName}`
+    return JSON.stringify([inputKey, interiorNodeId, widgetName, inputName])
   }
 
   private _resolveLegacyEntry(
@@ -377,22 +611,34 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
       (e) => {
         const subgraphInput = e.detail.input
         const { name, type } = subgraphInput
-        const existingInput = this.inputs.find((i) => i.name === name)
+        const existingInput = this.inputs.find(
+          (input) => input._subgraphSlot === subgraphInput
+        )
         if (existingInput) {
           const linkId = subgraphInput.linkIds[0]
-          const { inputNode, input } = subgraph.links[linkId].resolve(subgraph)
-          const widget = inputNode?.widgets?.find?.((w) => w.name === name)
-          if (widget && inputNode)
+          if (linkId === undefined) return
+
+          const link = this.subgraph.getLink(linkId)
+          if (!link) return
+
+          const { inputNode, input } = link.resolve(subgraph)
+          if (!inputNode || !input) return
+
+          const widget = inputNode.getWidgetFromSlot(input)
+          if (widget)
             this._setWidget(
               subgraphInput,
               existingInput,
               widget,
-              input?.widget,
+              input.widget,
               inputNode
             )
           return
         }
-        const input = this.addInput(name, type)
+        const input = this.addInput(name, type, {
+          _subgraphSlot: subgraphInput
+        })
+        this._invalidatePromotedViewsCache()
 
         this._addSubgraphInputListeners(subgraphInput, input)
       },
@@ -406,6 +652,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
         if (widget) this.ensureWidgetRemoved(widget)
 
         this.removeInput(e.detail.index)
+        this._invalidatePromotedViewsCache()
         this._syncPromotions()
         this.setDirtyCanvas(true, true)
       },
@@ -441,6 +688,11 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
         if (input._widget) {
           input._widget.label = newName
         }
+        this._invalidatePromotedViewsCache()
+        this.graph?.trigger('node:slot-label:changed', {
+          nodeId: this.id,
+          slotType: NodeSlotType.INPUT
+        })
       },
       { signal }
     )
@@ -453,6 +705,10 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
         if (!output) throw new Error('Subgraph output not found')
 
         output.label = newName
+        this.graph?.trigger('node:slot-label:changed', {
+          nodeId: this.id,
+          slotType: NodeSlotType.OUTPUT
+        })
       },
       { signal }
     )
@@ -484,6 +740,8 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     subgraphInput: SubgraphInput,
     input: INodeInputSlot & Partial<ISubgraphInput>
   ) {
+    input._subgraphSlot = subgraphInput
+
     if (
       input._listenerController &&
       typeof input._listenerController.abort === 'function'
@@ -496,36 +754,39 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     subgraphInput.events.addEventListener(
       'input-connected',
       (e) => {
-        const widget = subgraphInput._widget
-        if (!widget) return
+        this._invalidatePromotedViewsCache()
 
-        // If this widget is already promoted, demote it first
-        // so it transitions cleanly to being linked via SubgraphInput.
+        // `SubgraphInput.connect()` dispatches before appending to `linkIds`,
+        // so resolve by current links would miss this new connection.
+        // Keep the earliest bound view once present, and only bind from event
+        // payload when this input has no representative yet.
         const nodeId = String(e.detail.node.id)
         if (
           usePromotionStore().isPromoted(
             this.rootGraph.id,
             this.id,
             nodeId,
-            widget.name
+            e.detail.widget.name
           )
         ) {
           usePromotionStore().demote(
             this.rootGraph.id,
             this.id,
             nodeId,
-            widget.name
+            e.detail.widget.name
           )
         }
 
-        const widgetLocator = e.detail.input.widget
-        this._setWidget(
-          subgraphInput,
-          input,
-          widget,
-          widgetLocator,
-          e.detail.node
-        )
+        const didSetWidgetFromEvent = !input._widget
+        if (didSetWidgetFromEvent)
+          this._setWidget(
+            subgraphInput,
+            input,
+            e.detail.widget,
+            e.detail.input.widget,
+            e.detail.node
+          )
+
         this._syncPromotions()
       },
       { signal }
@@ -534,9 +795,15 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     subgraphInput.events.addEventListener(
       'input-disconnected',
       () => {
-        // If the input is connected to more than one widget, don't remove the widget
+        this._invalidatePromotedViewsCache()
+
+        // If links remain, rebind to the current representative.
         const connectedWidgets = subgraphInput.getConnectedWidgets()
-        if (connectedWidgets.length > 0) return
+        if (connectedWidgets.length > 0) {
+          this._resolveInputWidget(subgraphInput, input)
+          this._syncPromotions()
+          return
+        }
 
         if (input._widget) this.ensureWidgetRemoved(input._widget)
 
@@ -549,6 +816,62 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     )
   }
 
+  private _rebindInputSubgraphSlots(): void {
+    this._invalidatePromotedViewsCache()
+
+    const subgraphSlots = [...this.subgraph.inputNode.slots]
+    const slotsBySignature = new Map<string, SubgraphInput[]>()
+    const slotsByName = new Map<string, SubgraphInput[]>()
+
+    for (const slot of subgraphSlots) {
+      const signature = `${slot.name}:${String(slot.type)}`
+      const signatureSlots = slotsBySignature.get(signature)
+      if (signatureSlots) {
+        signatureSlots.push(slot)
+      } else {
+        slotsBySignature.set(signature, [slot])
+      }
+
+      const nameSlots = slotsByName.get(slot.name)
+      if (nameSlots) {
+        nameSlots.push(slot)
+      } else {
+        slotsByName.set(slot.name, [slot])
+      }
+    }
+
+    const assignedSlotIds = new Set<string>()
+    const takeUnassignedSlot = (
+      slots: SubgraphInput[] | undefined
+    ): SubgraphInput | undefined => {
+      if (!slots) return undefined
+      return slots.find((slot) => !assignedSlotIds.has(String(slot.id)))
+    }
+
+    for (const input of this.inputs) {
+      const existingSlot = input._subgraphSlot
+      if (
+        existingSlot &&
+        this.subgraph.inputNode.slots.some((slot) => slot === existingSlot)
+      ) {
+        assignedSlotIds.add(String(existingSlot.id))
+        continue
+      }
+
+      const signature = `${input.name}:${String(input.type)}`
+      const matchedSlot =
+        takeUnassignedSlot(slotsBySignature.get(signature)) ??
+        takeUnassignedSlot(slotsByName.get(input.name))
+
+      if (matchedSlot) {
+        input._subgraphSlot = matchedSlot
+        assignedSlotIds.add(String(matchedSlot.id))
+      } else {
+        delete input._subgraphSlot
+      }
+    }
+  }
+
   override configure(info: ExportedSubgraphInstance): void {
     for (const input of this.inputs) {
       if (
@@ -561,8 +884,8 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
 
     this.inputs.length = 0
     this.inputs.push(
-      ...this.subgraph.inputNode.slots.map(
-        (slot) =>
+      ...this.subgraph.inputNode.slots.map((slot) =>
+        Object.assign(
           new NodeInputSlot(
             {
               name: slot.name,
@@ -572,7 +895,11 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
               link: null
             },
             this
-          )
+          ),
+          {
+            _subgraphSlot: slot
+          }
+        )
       )
     )
 
@@ -597,6 +924,8 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
   }
 
   override _internalConfigureAfterSlots() {
+    this._rebindInputSubgraphSlots()
+
     // Ensure proxyWidgets is initialized so it serializes
     this.properties.proxyWidgets ??= []
 
@@ -604,10 +933,12 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     // Do NOT clear properties.proxyWidgets — it was already populated
     // from serialized data by super.configure(info) before this runs.
     this._promotedViewManager.clear()
+    this._invalidatePromotedViewsCache()
 
     // Hydrate the store from serialized properties.proxyWidgets
     const raw = parseProxyWidgets(this.properties.proxyWidgets)
     const store = usePromotionStore()
+
     const entries = raw
       .map(([nodeId, widgetName]) => {
         if (nodeId === '-1') {
@@ -624,6 +955,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
         return { interiorNodeId: nodeId, widgetName }
       })
       .filter((e): e is NonNullable<typeof e> => e !== null)
+
     store.setPromotions(this.rootGraph.id, this.id, entries)
 
     // Write back resolved entries so legacy -1 format doesn't persist
@@ -636,9 +968,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
 
     // Check all inputs for connected widgets
     for (const input of this.inputs) {
-      const subgraphInput = this.subgraph.inputNode.slots.find(
-        (slot) => slot.name === input.name
-      )
+      const subgraphInput = input._subgraphSlot
       if (!subgraphInput) {
         // Skip inputs that don't exist in the subgraph definition
         // This can happen when loading workflows with dynamically added inputs
@@ -702,6 +1032,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     inputWidget: IWidgetLocator | undefined,
     interiorNode: LGraphNode
   ) {
+    this._invalidatePromotedViewsCache()
     this._flushPendingPromotions()
 
     const nodeId = String(interiorNode.id)
@@ -751,8 +1082,18 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
       nodeId,
       widgetName,
       () =>
-        createPromotedWidgetView(this, nodeId, widgetName, subgraphInput.name),
-      this._makePromotionViewKey(subgraphInput.name, nodeId, widgetName)
+        createPromotedWidgetView(
+          this,
+          nodeId,
+          widgetName,
+          input.label ?? subgraphInput.name
+        ),
+      this._makePromotionViewKey(
+        String(subgraphInput.id),
+        nodeId,
+        widgetName,
+        input.label ?? input.name
+      )
     )
 
     // NOTE: This code creates linked chains of prototypes for passing across
@@ -808,6 +1149,20 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     return super.addInput(name, type, inputProperties)
   }
 
+  override getSlotFromWidget(
+    widget: IBaseWidget | undefined
+  ): INodeInputSlot | undefined {
+    if (!widget || !isPromotedWidgetView(widget))
+      return super.getSlotFromWidget(widget)
+
+    return this.inputs.find((input) => input._widget === widget)
+  }
+
+  override getWidgetFromSlot(slot: INodeInputSlot): IBaseWidget | undefined {
+    if (slot._widget) return slot._widget
+    return super.getWidgetFromSlot(slot)
+  }
+
   override getInputLink(slot: number): LLink | null {
     // Output side: the link from inside the subgraph
     const innerLink = this.subgraph.outputNode.slots[slot].getLinks().at(0)
@@ -937,18 +1292,24 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
   }
 
   private _removePromotedView(view: PromotedWidgetView): void {
+    this._invalidatePromotedViewsCache()
+
     this._promotedViewManager.remove(view.sourceNodeId, view.sourceWidgetName)
-    // Reconciled views can also be keyed by inputName-scoped view keys.
-    // Remove both key shapes to avoid stale cache entries across promote/rebind flows.
-    this._promotedViewManager.removeByViewKey(
-      view.sourceNodeId,
-      view.sourceWidgetName,
-      this._makePromotionViewKey(
-        view.name,
+    for (const input of this.inputs) {
+      if (input._widget !== view || !input._subgraphSlot) continue
+      const inputName = input.label ?? input.name
+
+      this._promotedViewManager.removeByViewKey(
         view.sourceNodeId,
-        view.sourceWidgetName
+        view.sourceWidgetName,
+        this._makePromotionViewKey(
+          String(input._subgraphSlot.id),
+          view.sourceNodeId,
+          view.sourceWidgetName,
+          inputName
+        )
       )
-    )
+    }
   }
 
   override removeWidget(widget: IBaseWidget): void {
@@ -987,6 +1348,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
 
   override onRemoved(): void {
     this._eventAbortController.abort()
+    this._invalidatePromotedViewsCache()
 
     for (const widget of this.widgets) {
       if (isPromotedWidgetView(widget)) {
@@ -1053,9 +1415,9 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     for (const input of this.inputs) {
       if (!input._widget) continue
 
-      const subgraphInput = this.subgraph.inputNode.slots.find(
-        (slot) => slot.name === input.name
-      )
+      const subgraphInput =
+        input._subgraphSlot ??
+        this.subgraph.inputNode.slots.find((slot) => slot.name === input.name)
       if (!subgraphInput) continue
 
       const connectedWidgets = subgraphInput.getConnectedWidgets()

src/lib/litegraph/src/subgraph/__fixtures__/subgraphComplexPromotion1.ts

@@ -0,0 +1,322 @@
+import type { ISerialisedGraph } from '@/lib/litegraph/src/types/serialisation'
+
+export const subgraphComplexPromotion1 = {
+  id: 'e49902fa-ee3e-40e6-a59e-c8931888ad0e',
+  revision: 0,
+  last_node_id: 21,
+  last_link_id: 23,
+  nodes: [
+    {
+      id: 12,
+      type: 'PreviewAny',
+      pos: [1367.8236034435063, 305.51100163315823],
+      size: [225, 166],
+      flags: {},
+      order: 3,
+      mode: 0,
+      inputs: [
+        {
+          name: 'source',
+          type: '*',
+          link: 21
+        }
+      ],
+      outputs: [],
+      properties: {
+        'Node name for S&R': 'PreviewAny'
+      },
+      widgets_values: [null, null, null]
+    },
+    {
+      id: 13,
+      type: 'PreviewAny',
+      pos: [1271.9742739655217, 551.9124470179938],
+      size: [225, 166],
+      flags: {},
+      order: 1,
+      mode: 0,
+      inputs: [
+        {
+          name: 'source',
+          type: '*',
+          link: 19
+        }
+      ],
+      outputs: [],
+      properties: {
+        'Node name for S&R': 'PreviewAny'
+      },
+      widgets_values: [null, null, null]
+    },
+    {
+      id: 14,
+      type: 'PreviewAny',
+      pos: [1414.8695925586444, 847.9456885036253],
+      size: [225, 166],
+      flags: {},
+      order: 2,
+      mode: 0,
+      inputs: [
+        {
+          name: 'source',
+          type: '*',
+          link: 20
+        }
+      ],
+      outputs: [],
+      properties: {
+        'Node name for S&R': 'PreviewAny'
+      },
+      widgets_values: [null, null, null]
+    },
+    {
+      id: 21,
+      type: '5e0670b8-ea2c-4fb6-8b73-a1100a2d4f8f',
+      pos: [741.0375276545419, 560.8496560588814],
+      size: [225, 305.3333435058594],
+      flags: {},
+      order: 0,
+      mode: 0,
+      inputs: [],
+      outputs: [
+        {
+          name: 'STRING',
+          type: 'STRING',
+          links: [19]
+        },
+        {
+          name: 'STRING_1',
+          type: 'STRING',
+          links: [20]
+        },
+        {
+          name: 'STRING_2',
+          type: 'STRING',
+          links: [21]
+        }
+      ],
+      properties: {
+        proxyWidgets: [
+          ['20', 'string_a'],
+          ['19', 'string_a'],
+          ['18', 'string_a']
+        ]
+      },
+      widgets_values: []
+    }
+  ],
+  links: [
+    [19, 21, 0, 13, 0, 'STRING'],
+    [20, 21, 1, 14, 0, 'STRING'],
+    [21, 21, 2, 12, 0, 'STRING']
+  ],
+  groups: [],
+  definitions: {
+    subgraphs: [
+      {
+        id: '5e0670b8-ea2c-4fb6-8b73-a1100a2d4f8f',
+        version: 1,
+        state: {
+          lastGroupId: 0,
+          lastNodeId: 21,
+          lastLinkId: 23,
+          lastRerouteId: 0
+        },
+        revision: 0,
+        config: {},
+        name: 'New Subgraph',
+        inputNode: {
+          id: -10,
+          bounding: [596.9206067268835, 805.5404332481304, 120, 60]
+        },
+        outputNode: {
+          id: -20,
+          bounding: [1376.7286067268833, 769.5404332481304, 120, 100]
+        },
+        inputs: [
+          {
+            id: '78479bf4-8145-41d5-9d11-c38e3149fc59',
+            name: 'string_a',
+            type: 'STRING',
+            linkIds: [22, 23],
+            pos: [696.9206067268835, 825.5404332481304]
+          }
+        ],
+        outputs: [
+          {
+            id: 'aa263e4e-b558-4dbf-bcb9-ff0c1c72cbef',
+            name: 'STRING',
+            type: 'STRING',
+            linkIds: [16],
+            localized_name: 'STRING',
+            pos: [1396.7286067268833, 789.5404332481304]
+          },
+          {
+            id: '8eee6fe3-dc2f-491a-9e01-04ef83309dad',
+            name: 'STRING_1',
+            type: 'STRING',
+            linkIds: [17],
+            localized_name: 'STRING_1',
+            pos: [1396.7286067268833, 809.5404332481304]
+          },
+          {
+            id: 'a446d5b9-6042-434d-848a-5d3af5e8e0d4',
+            name: 'STRING_2',
+            type: 'STRING',
+            linkIds: [18],
+            localized_name: 'STRING_2',
+            pos: [1396.7286067268833, 829.5404332481304]
+          }
+        ],
+        widgets: [],
+        nodes: [
+          {
+            id: 18,
+            type: 'StringConcatenate',
+            pos: [818.5102631756379, 706.4562049408103],
+            size: [480, 268],
+            flags: {},
+            order: 0,
+            mode: 0,
+            inputs: [
+              {
+                localized_name: 'string_a',
+                name: 'string_a',
+                type: 'STRING',
+                widget: {
+                  name: 'string_a'
+                },
+                link: 23
+              }
+            ],
+            outputs: [
+              {
+                localized_name: 'STRING',
+                name: 'STRING',
+                type: 'STRING',
+                links: [16]
+              }
+            ],
+            title: 'InnerCatB',
+            properties: {
+              'Node name for S&R': 'StringConcatenate'
+            },
+            widgets_values: ['Poop', '_B', '']
+          },
+          {
+            id: 19,
+            type: 'StringConcatenate',
+            pos: [812.9370280206649, 1040.648423402667],
+            size: [480, 268],
+            flags: {},
+            order: 1,
+            mode: 0,
+            inputs: [],
+            outputs: [
+              {
+                localized_name: 'STRING',
+                name: 'STRING',
+                type: 'STRING',
+                links: [17]
+              }
+            ],
+            title: 'InnerCatC',
+            properties: {
+              'Node name for S&R': 'StringConcatenate'
+            },
+            widgets_values: ['', '_C', '']
+          },
+          {
+            id: 20,
+            type: 'StringConcatenate',
+            pos: [824.7110975088726, 386.4230523609899],
+            size: [480, 268],
+            flags: {},
+            order: 2,
+            mode: 0,
+            inputs: [
+              {
+                localized_name: 'string_a',
+                name: 'string_a',
+                type: 'STRING',
+                widget: {
+                  name: 'string_a'
+                },
+                link: 22
+              }
+            ],
+            outputs: [
+              {
+                localized_name: 'STRING',
+                name: 'STRING',
+                type: 'STRING',
+                links: [18]
+              }
+            ],
+            title: 'InnerCatA',
+            properties: {
+              'Node name for S&R': 'StringConcatenate'
+            },
+            widgets_values: ['Poop', '_A', '']
+          }
+        ],
+        groups: [],
+        links: [
+          {
+            id: 16,
+            origin_id: 18,
+            origin_slot: 0,
+            target_id: -20,
+            target_slot: 0,
+            type: 'STRING'
+          },
+          {
+            id: 17,
+            origin_id: 19,
+            origin_slot: 0,
+            target_id: -20,
+            target_slot: 1,
+            type: 'STRING'
+          },
+          {
+            id: 18,
+            origin_id: 20,
+            origin_slot: 0,
+            target_id: -20,
+            target_slot: 2,
+            type: 'STRING'
+          },
+          {
+            id: 22,
+            origin_id: -10,
+            origin_slot: 0,
+            target_id: 20,
+            target_slot: 0,
+            type: 'STRING'
+          },
+          {
+            id: 23,
+            origin_id: -10,
+            origin_slot: 0,
+            target_id: 18,
+            target_slot: 0,
+            type: 'STRING'
+          }
+        ],
+        extra: {
+          workflowRendererVersion: 'Vue'
+        }
+      }
+    ]
+  },
+  config: {},
+  extra: {
+    ds: {
+      scale: 0.6638894832438259,
+      offset: [-408.2009703049473, -183.8039508449224]
+    },
+    workflowRendererVersion: 'Vue',
+    frontendVersion: '1.42.3'
+  },
+  version: 0.4
+} as const as unknown as ISerialisedGraph

src/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers.test.ts

@@ -0,0 +1,32 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+
+import {
+  cleanupComplexPromotionFixtureNodeType,
+  setupComplexPromotionFixture
+} from './subgraphHelpers'
+
+const FIXTURE_STRING_CONCAT_TYPE = 'Fixture/StringConcatenate'
+
+describe('setupComplexPromotionFixture', () => {
+  afterEach(() => {
+    cleanupComplexPromotionFixtureNodeType()
+  })
+
+  it('can clean up the globally registered fixture node type', () => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+
+    setupComplexPromotionFixture()
+    expect(
+      LiteGraph.registered_node_types[FIXTURE_STRING_CONCAT_TYPE]
+    ).toBeDefined()
+
+    cleanupComplexPromotionFixtureNodeType()
+    expect(
+      LiteGraph.registered_node_types[FIXTURE_STRING_CONCAT_TYPE]
+    ).toBeUndefined()
+  })
+})

src/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers.ts

@@ -8,7 +8,12 @@
 import { expect } from 'vitest'
 
 import type { ISlotType, NodeId } from '@/lib/litegraph/src/litegraph'
-import { LGraph, LGraphNode, Subgraph } from '@/lib/litegraph/src/litegraph'
+import {
+  LGraph,
+  LGraphNode,
+  LiteGraph,
+  Subgraph
+} from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type {
   ExportedSubgraph,
@@ -17,6 +22,27 @@ import type {
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
 import { createUuidv4 } from '@/lib/litegraph/src/utils/uuid'
 
+import { subgraphComplexPromotion1 } from './subgraphComplexPromotion1'
+
+const FIXTURE_STRING_CONCAT_TYPE = 'Fixture/StringConcatenate'
+
+class FixtureStringConcatenateNode extends LGraphNode {
+  constructor() {
+    super('StringConcatenate')
+    const input = this.addInput('string_a', 'STRING')
+    input.widget = { name: 'string_a' }
+    this.addOutput('STRING', 'STRING')
+    this.addWidget('text', 'string_a', '', () => {})
+    this.addWidget('text', 'string_b', '', () => {})
+    this.addWidget('text', 'delimiter', '', () => {})
+  }
+}
+
+export function cleanupComplexPromotionFixtureNodeType(): void {
+  if (!LiteGraph.registered_node_types[FIXTURE_STRING_CONCAT_TYPE]) return
+  LiteGraph.unregisterNodeType(FIXTURE_STRING_CONCAT_TYPE)
+}
+
 interface TestSubgraphOptions {
   id?: UUID
   name?: string
@@ -209,6 +235,48 @@ export function createTestSubgraphNode(
   return new SubgraphNode(parentGraph, subgraph, instanceData)
 }
 
+export function setupComplexPromotionFixture(): {
+  graph: LGraph
+  subgraph: Subgraph
+  hostNode: SubgraphNode
+} {
+  const fixture = structuredClone(subgraphComplexPromotion1)
+  const subgraphData = fixture.definitions?.subgraphs?.[0]
+  if (!subgraphData)
+    throw new Error('Expected fixture to contain one subgraph definition')
+
+  cleanupComplexPromotionFixtureNodeType()
+  LiteGraph.registerNodeType(
+    FIXTURE_STRING_CONCAT_TYPE,
+    FixtureStringConcatenateNode
+  )
+
+  for (const node of subgraphData.nodes as Array<{ type: string }>) {
+    if (node.type === 'StringConcatenate')
+      node.type = FIXTURE_STRING_CONCAT_TYPE
+  }
+
+  const hostNodeData = fixture.nodes.find((node) => node.id === 21)
+  if (!hostNodeData)
+    throw new Error('Expected fixture to contain subgraph instance node id 21')
+
+  const graph = new LGraph()
+  const subgraph = graph.createSubgraph(subgraphData as ExportedSubgraph)
+  subgraph.configure(subgraphData as ExportedSubgraph)
+  const hostNode = new SubgraphNode(
+    graph,
+    subgraph,
+    hostNodeData as ExportedSubgraphInstance
+  )
+  graph.add(hostNode)
+
+  return {
+    graph,
+    subgraph,
+    hostNode
+  }
+}
+
 /**
  * Creates a nested hierarchy of subgraphs for testing deep nesting scenarios.
  * @param options Configuration for the nested structure

src/locales/ar/commands.json

@@ -71,9 +71,6 @@
   "Comfy_Canvas_PasteFromClipboard": {
     "label": "لصق"
   },
-  "Comfy_Canvas_PasteFromClipboardWithConnect": {
-    "label": "لصق مع الاتصال"
-  },
   "Comfy_Canvas_ResetView": {
     "label": "إعادة تعيين العرض"
   },

src/locales/ar/main.json

@@ -2,9 +2,7 @@
   "actionbar": {
     "dockToTop": "إلصق بالأعلى",
     "feedback": "ملاحظات",
-    "feedbackTooltip": "إرسال ملاحظات",
-    "share": "مشاركة",
-    "shareTooltip": "مشاركة سير العمل"
+    "feedbackTooltip": "إرسال ملاحظات"
   },
   "apiNodesCostBreakdown": {
     "costPerRun": "التكلفة لكل تشغيل",
@@ -323,24 +321,18 @@
     "y": "ص"
   },
   "breadcrumbsMenu": {
-    "app": "التطبيق",
     "clearWorkflow": "مسح سير العمل",
     "deleteBlueprint": "حذف المخطط",
     "deleteWorkflow": "حذف سير العمل",
     "duplicate": "تكرار",
-    "editBuilderMode": "تعديل التطبيق",
     "enterAppMode": "الدخول إلى وضع التطبيق",
     "enterBuilderMode": "دخول وضع بناء التطبيق",
     "enterNewName": "أدخل اسمًا جديدًا",
-    "enterNodeGraph": "دخول رسم العقد",
     "exitAppMode": "الخروج من وضع التطبيق",
-    "graph": "الرسم البياني",
     "missingNodesWarning": "يحتوي سير العمل على عقد غير مدعومة (مظللة باللون الأحمر).",
-    "share": "مشاركة",
     "workflowActions": "إجراءات سير العمل"
   },
   "builderMenu": {
-    "enterAppMode": "الدخول إلى وضع التطبيق",
     "exitAppBuilder": "الخروج من مُنشئ التطبيق"
   },
   "builderToolbar": {
@@ -362,7 +354,6 @@
     "defaultViewTitle": "تعيين العرض الافتراضي لهذا سير العمل",
     "emptyWorkflowPrompt": "هل ترغب في البدء بقالب؟",
     "emptyWorkflowTitle": "لا يحتوي سير العمل هذا على أي عقد",
-    "exitToWorkflow": "الخروج إلى سير العمل",
     "inputs": "المدخلات",
     "inputsDescription": "اختر المدخلات",
     "label": "منشئ التطبيقات",
@@ -516,80 +507,6 @@
     "red": "أحمر",
     "yellow": "أصفر"
   },
-  "comfyHubProfile": {
-    "checkingAccess": "جارٍ التحقق من صلاحية النشر...",
-    "chooseProfilePicture": "اختر صورة الملف الشخصي",
-    "createProfile": "إنشاء الملف الشخصي",
-    "createProfileButton": "إنشاء ملفي الشخصي",
-    "createProfileTitle": "أنشئ ملفك الشخصي على Comfy Hub",
-    "creatingProfile": "جارٍ إنشاء الملف الشخصي...",
-    "descriptionLabel": "وصفك",
-    "descriptionPlaceholder": "أخبر المجتمع عن نفسك...",
-    "introDescription": "انشر سير عملك، وابنِ محفظتك، واكتشفك ملايين المستخدمين",
-    "introSubtitle": "لمشاركة سير عملك على ComfyHub، لنقم أولاً بإنشاء ملفك الشخصي.",
-    "introTitle": "النشر على ComfyHub",
-    "modalTitle": "إنشاء ملفك الشخصي على ComfyHub",
-    "nameLabel": "اسمك",
-    "namePlaceholder": "أدخل اسمك هنا",
-    "profileCreationNav": "إنشاء الملف الشخصي",
-    "startPublishingButton": "ابدأ النشر",
-    "successDescription": "يمكنك الآن رفع سير عملك على صفحة المبدع الخاصة بك",
-    "successProfileLink": "comfy.com/p/{username}",
-    "successProfileUrl": "صفحتك الشخصية متاحة الآن على",
-    "successTitle": "يبدو رائعًا، {'@'}{username}!",
-    "uploadCover": "+ رفع صورة الغلاف",
-    "uploadProfilePicture": "+ رفع صورة الملف الشخصي",
-    "uploadWorkflowButton": "رفع سير عملي",
-    "usernameLabel": "اسم المستخدم (إجباري)",
-    "usernamePlaceholder": "@"
-  },
-  "comfyHubPublish": {
-    "back": "رجوع",
-    "createProfileCta": "إنشاء ملف شخصي",
-    "createProfileToPublish": "أنشئ ملفًا شخصيًا للنشر على ComfyHub",
-    "exampleImage": "صورة نموذجية {index}",
-    "examplesDescription": "أضف حتى {total} صورة نموذجية إضافية",
-    "maxExamples": "يمكنك اختيار حتى {max} أمثلة",
-    "next": "التالي",
-    "publishButton": "النشر على ComfyHub",
-    "selectAThumbnail": "اختر صورة مصغرة",
-    "showLessTags": "عرض أقل...",
-    "showMoreTags": "عرض المزيد...",
-    "stepDescribe": "وصف سير العمل",
-    "stepExamples": "إضافة أمثلة للإخراج",
-    "stepFinish": "إنهاء النشر",
-    "suggestedTags": "وسوم مقترحة",
-    "tags": "الوسوم",
-    "tagsDescription": "اختر الوسوم ليسهل على الآخرين العثور على سير عملك",
-    "tagsPlaceholder": "أدخل وسومًا تناسب سير عملك لمساعدة الآخرين في العثور عليه مثل #nanobanana أو #anime أو #faceswap",
-    "thumbnailImage": "صورة",
-    "thumbnailImageComparison": "مقارنة الصور",
-    "thumbnailPreview": "معاينة الصورة المصغرة",
-    "thumbnailVideo": "فيديو",
-    "title": "النشر على ComfyHub",
-    "uploadAnImage": "انقر للاستعراض أو اسحب صورة",
-    "uploadComparison": "رفع صورة قبل وبعد",
-    "uploadComparisonAfterPrompt": "بعد",
-    "uploadComparisonBeforePrompt": "قبل",
-    "uploadExampleImage": "رفع صورة نموذجية",
-    "uploadPromptClickToBrowse": "انقر للاستعراض أو",
-    "uploadPromptDropImage": "أسقط صورة هنا",
-    "uploadPromptDropVideo": "أسقط فيديو هنا",
-    "uploadThumbnail": "رفع صورة",
-    "uploadThumbnailHint": "يفضل نسبة 1:1، الحد الأقصى 1080p",
-    "uploadVideo": "رفع فيديو",
-    "videoPreview": "معاينة صورة الفيديو المصغرة",
-    "workflowDescription": "وصف سير العمل",
-    "workflowDescriptionPlaceholder": "ما الذي يجعل سير عملك مميزًا ومثيرًا؟ كن محددًا حتى يعرف الآخرون ما يمكن توقعه.",
-    "workflowName": "اسم سير العمل",
-    "workflowNamePlaceholder": "نصيحة: أدخل اسمًا وصفيًا يسهل البحث عنه",
-    "workflowType": "نوع سير العمل",
-    "workflowTypeEditing": "تحرير",
-    "workflowTypeImageGeneration": "توليد الصور",
-    "workflowTypePlaceholder": "اختر النوع",
-    "workflowTypeUpscaling": "تحسين الجودة",
-    "workflowTypeVideoGeneration": "توليد الفيديو"
-  },
   "commands": {
     "clear": "مسح سير العمل",
     "clipspace": "فتح مساحة القص",
@@ -952,7 +869,6 @@
     "collapseAll": "طي الكل",
     "color": "اللون",
     "comfy": "Comfy",
-    "comfyCloud": "Comfy Cloud",
     "comfyOrgLogoAlt": "شعار ComfyOrg",
     "comingSoon": "قريباً",
     "command": "أمر",
@@ -1426,7 +1342,7 @@
       "appBuilder": "منشئ التطبيقات",
       "apps": "التطبيقات",
       "appsEmptyMessage": "سيتم عرض التطبيقات المحفوظة هنا.\nانقر أدناه لبناء تطبيقك الأول.",
-      "appsEmptyMessageAction": "انقر أدناه لإنشاء أول تطبيق لك."
+      "enterAppMode": "الدخول إلى وضع التطبيق"
     },
     "arrange": {
       "atLeastOne": "عقدة واحدة على الأقل",
@@ -1440,18 +1356,14 @@
     },
     "backToWorkflow": "العودة إلى سير العمل",
     "beta": "وضع التطبيق تجريبي - أرسل ملاحظاتك",
-    "buildAnApp": "أنشئ تطبيقًا",
     "builder": {
       "exit": "خروج من البناء",
       "exitConfirmMessage": "لديك تغييرات غير محفوظة ستفقد\nهل تريد الخروج بدون حفظ؟",
       "exitConfirmTitle": "الخروج من بناء التطبيق؟",
-      "inputPlaceholder": "سيتم عرض المدخلات هنا",
       "inputsDesc": "سيتفاعل المستخدمون مع هذه المدخلات ويعدلونها لإنشاء النتائج.",
       "inputsExample": "أمثلة: \"تحميل صورة\"، \"موجه نصي\"، \"خطوات\"",
       "noInputs": "لم تتم إضافة أي مدخلات بعد",
       "noOutputs": "لم تتم إضافة أي عقد إخراج بعد",
-      "outputPlaceholder": "سيتم عرض عقد الإخراج هنا",
-      "outputRequiredPlaceholder": "مطلوب عقدة واحدة على الأقل",
       "outputsDesc": "وصل عقدة إخراج واحدة على الأقل حتى يتمكن المستخدمون من رؤية النتائج بعد التشغيل.",
       "outputsExample": "أمثلة: \"حفظ صورة\" أو \"حفظ فيديو\"",
       "promptAddInputs": "انقر على معلمات العقدة لإضافتها هنا كمدخلات",
@@ -1459,15 +1371,12 @@
       "title": "وضع بناء التطبيق",
       "unknownWidget": "عنصر الواجهة غير مرئي"
     },
-    "cancelThisRun": "إلغاء هذا التشغيل",
-    "deleteAllAssets": "حذف جميع الأصول من هذه الجلسة",
     "downloadAll": "تنزيل الكل",
     "dragAndDropImage": "اسحب وأسقط صورة",
     "emptyWorkflowExplanation": "سير العمل الخاص بك فارغ. تحتاج إلى بعض العقد أولاً لبدء بناء التطبيق.",
     "enterNodeGraph": "دخول مخطط العقد",
     "giveFeedback": "إعطاء ملاحظات",
     "graphMode": "وضع الرسم البياني",
-    "hasCreditCost": "يتطلب أرصدة إضافية",
     "linearMode": "وضع التطبيق",
     "loadTemplate": "تحميل قالب",
     "mobileControls": "تعديل وتشغيل",
@@ -1484,8 +1393,6 @@
       "controls": "تظهر المخرجات في الأسفل، وعناصر التحكم على اليمين. كل شيء آخر يبقى بعيدًا.",
       "getStarted": "انقر على {runButton} للبدء.",
       "message": "عرض مبسط يخفي رسم العقد حتى تتمكن من التركيز على الإنشاء.",
-      "noOutputs": "يحتاج التطبيق إلى {count} على الأقل ليكون قابلاً للاستخدام.",
-      "oneOutput": "مخرج واحد",
       "sharing": "المشاركة سهلة: أنشئ سير العمل الخاص بك، افتح وضع التطبيق، انقر بزر الماوس الأيمن على علامة التبويب، ثم صدّر. عندما يفتح الآخرون ملفك، سيتم تشغيله مباشرة في هذا العرض النظيف. يمكنك مشاركة سير عمل قوي كأداة بسيطة دون الحاجة لفهم مخططات العقد.",
       "title": "مرحبًا بك في وضع التطبيق"
     }
@@ -1958,7 +1865,6 @@
     "Open Sign In Dialog": "فتح نافذة تسجيل الدخول",
     "Open extra_model_paths_yaml": "فتح ملف extra_model_paths.yaml",
     "Paste": "لصق",
-    "Paste with Connect": "لصق مع الاتصال",
     "Pin/Unpin Selected Items": "تثبيت/إلغاء تثبيت العناصر المحددة",
     "Pin/Unpin Selected Nodes": "تثبيت/إلغاء تثبيت العقد المحددة",
     "Previous Opened Workflow": "سير العمل السابق المفتوح",
@@ -2130,7 +2036,6 @@
     "lotus": "lotus",
     "ltxv": "ltxv",
     "mask": "قناع",
-    "math": "رياضيات",
     "model": "نموذج",
     "model_merging": "دمج النماذج",
     "model_patches": "تصحيحات النموذج",
@@ -2234,18 +2139,6 @@
     },
     "title": "جهازك غير مدعوم"
   },
-  "openSharedWorkflow": {
-    "author": "المؤلف:",
-    "copyAssetsAndOpen": "استيراد الأصول وفتح سير العمل",
-    "copyDescription": "فتح سير العمل سينشئ نسخة جديدة في مساحة العمل الخاصة بك",
-    "dialogTitle": "فتح سير العمل المشترك",
-    "importFailed": "فشل استيراد أصول سير العمل",
-    "loadError": "تعذر تحميل سير العمل المشترك هذا. يرجى المحاولة لاحقًا.",
-    "nonPublicAssetsWarningLine1": "يأتي هذا سير العمل مع أصول غير عامة.",
-    "nonPublicAssetsWarningLine2": "سيتم استيراد هذه الأصول إلى مكتبتك عند فتح سير العمل",
-    "openWithoutImporting": "فتح بدون استيراد",
-    "openWorkflow": "فتح سير العمل"
-  },
   "painter": {
     "background": "الخلفية",
     "brush": "فرشاة",
@@ -2704,47 +2597,6 @@
     "default": "افتراضي",
     "round": "دائري"
   },
-  "shareNoOutputs": {
-    "message": "أنت على وشك مشاركة تطبيق بدون مخرجات. لا يمكن استخدامه حتى يتم توصيل مخرج.\n\nهل ترغب في المشاركة على أي حال؟",
-    "shareAnyway": "مشاركة على أي حال",
-    "title": "التطبيق لا يحتوي على مخرجات"
-  },
-  "shareWorkflow": {
-    "acknowledgeCheckbox": "أفهم أن عناصر الوسائط هذه سيتم نشرها وجعلها عامة",
-    "checkingAssets": "جارٍ التحقق من ظهور الوسائط…",
-    "comfyHubButton": "رفع إلى ComfyHub",
-    "comfyHubDescription": "ComfyHub هو مركز مجتمع ComfyUI الرسمي.\nسيكون لسير العمل الخاص بك صفحة عامة يمكن للجميع مشاهدتها.",
-    "comfyHubTitle": "رفع إلى ComfyHub",
-    "copyLink": "نسخ",
-    "createLinkButton": "إنشاء رابط",
-    "createLinkDescription": "عند إنشاء رابط لسير العمل الخاص بك، ستشارك عناصر الوسائط هذه مع سير العمل",
-    "createLinkTitle": "مشاركة سير العمل",
-    "creatingLink": "جارٍ إنشاء الرابط...",
-    "hasChangesDescription": "لقد أجريت تغييرات منذ آخر نشر لهذا سير العمل.",
-    "hasChangesTitle": "مشاركة سير العمل",
-    "inLibrary": "في المكتبة",
-    "linkCopied": "تم النسخ!",
-    "loadFailed": "فشل تحميل سير العمل المشترك",
-    "loadingTitle": "مشاركة سير العمل",
-    "mediaLabel": "{count} ملف وسائط | {count} ملفات وسائط",
-    "modelsLabel": "{count} نموذج | {count} نماذج",
-    "privateAssetsDescription": "يحتوي سير العمل الخاص بك على نماذج و/أو ملفات وسائط خاصة",
-    "publishToHubTab": "نشر",
-    "publishedOn": "تم النشر في {date}",
-    "saveButton": "حفظ سير العمل",
-    "saveFailedDescription": "فشل حفظ سير العمل. يرجى المحاولة مرة أخرى.",
-    "saveFailedTitle": "فشل الحفظ",
-    "saving": "جارٍ الحفظ...",
-    "shareLinkTab": "مشاركة",
-    "shareUrlLabel": "رابط المشاركة",
-    "successDescription": "أي شخص لديه هذا الرابط يمكنه عرض واستخدام سير العمل هذا. إذا قمت بإجراء تغييرات على سير العمل، يمكنك إعادة النشر لتحديث النسخة المشتركة.",
-    "successTitle": "تم نشر سير العمل بنجاح!",
-    "unsavedDescription": "يجب عليك حفظ سير العمل قبل المشاركة. احفظه الآن للمتابعة.",
-    "unsavedTitle": "احفظ سير العمل أولاً",
-    "updateLinkButton": "تحديث الرابط",
-    "updatingLink": "جارٍ تحديث الرابط...",
-    "workflowNameLabel": "اسم سير العمل"
-  },
   "shortcuts": {
     "essentials": "أساسي",
     "keyboardShortcuts": "اختصارات لوحة المفاتيح",
@@ -3376,7 +3228,6 @@
     "addedToWorkspace": "تمت إضافتك إلى {workspaceName}",
     "inviteAccepted": "تم قبول الدعوة",
     "inviteFailed": "فشل في قبول الدعوة",
-    "switchFailed": "فشل في تبديل مساحة العمل. يرجى المحاولة مرة أخرى.",
     "viewWorkspace": "عرض مساحة العمل"
   },
   "workspaceAuth": {

src/locales/ar/nodeDefs.json

@@ -1419,25 +1419,6 @@
       }
     }
   },
-  "ComfyMathExpression": {
-    "display_name": "تعبير رياضي",
-    "inputs": {
-      "expression": {
-        "name": "تعبير"
-      },
-      "values": {
-        "name": "القيم"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      },
-      "1": {
-        "tooltip": null
-      }
-    }
-  },
   "ComfySwitchNode": {
     "display_name": "مفتاح التحويل",
     "inputs": {
@@ -15131,64 +15112,6 @@
       }
     }
   },
-  "TencentModelTo3DUVNode": {
-    "description": "تنفيذ فك UV لنموذج ثلاثي الأبعاد لإنشاء نسيج UV. يجب أن يحتوي النموذج المُدخل على أقل من ٣٠٬٠٠٠ وجه.",
-    "display_name": "Hunyuan3D: من نموذج إلى UV",
-    "inputs": {
-      "control_after_generate": {
-        "name": "التحكم بعد التوليد"
-      },
-      "model_3d": {
-        "name": "نموذج_ثلاثي_الأبعاد",
-        "tooltip": "إدخال نموذج ثلاثي الأبعاد (GLB، OBJ، أو FBX)"
-      },
-      "seed": {
-        "name": "البذرة",
-        "tooltip": "تتحكم البذرة فيما إذا كان يجب إعادة تشغيل العقدة؛ النتائج غير حتمية بغض النظر عن البذرة."
-      }
-    },
-    "outputs": {
-      "0": {
-        "name": "OBJ",
-        "tooltip": null
-      },
-      "1": {
-        "name": "FBX",
-        "tooltip": null
-      }
-    }
-  },
-  "TencentSmartTopologyNode": {
-    "description": "تنفيذ إعادة طوبولوجيا ذكية لنموذج ثلاثي الأبعاد. يدعم صيغ GLB/OBJ؛ الحد الأقصى ٢٠٠ ميجابايت؛ يُوصى به للنماذج عالية التفاصيل.",
-    "display_name": "Hunyuan3D: طوبولوجيا ذكية",
-    "inputs": {
-      "control_after_generate": {
-        "name": "التحكم بعد التوليد"
-      },
-      "face_level": {
-        "name": "مستوى الوجوه",
-        "tooltip": "مستوى تقليل المضلعات."
-      },
-      "model_3d": {
-        "name": "نموذج_ثلاثي_الأبعاد",
-        "tooltip": "إدخال نموذج ثلاثي الأبعاد (GLB أو OBJ)"
-      },
-      "polygon_type": {
-        "name": "نوع المضلع",
-        "tooltip": "نوع تركيب السطح."
-      },
-      "seed": {
-        "name": "البذرة",
-        "tooltip": "تتحكم البذرة فيما إذا كان يجب إعادة تشغيل العقدة؛ النتائج غير حتمية بغض النظر عن البذرة."
-      }
-    },
-    "outputs": {
-      "0": {
-        "name": "OBJ",
-        "tooltip": null
-      }
-    }
-  },
   "TencentTextToModelNode": {
     "display_name": "Hunyuan3D: من نص إلى نموذج (احترافي)",
     "inputs": {

src/locales/ar/settings.json

@@ -400,7 +400,7 @@
     "name": "تخطيط شريط التبويبات",
     "options": {
       "Default": "افتراضي",
-      "Legacy": "تقليدي"
+      "Integrated": "مُدمج"
     },
     "tooltip": "يتحكم في تخطيط شريط التبويبات. \"مُدمج\" ينقل عناصر المساعدة والتحكمات الخاصة بالمستخدم إلى منطقة شريط التبويبات."
   },

src/locales/en/commands.json

@@ -71,9 +71,6 @@
   "Comfy_Canvas_PasteFromClipboard": {
     "label": "Paste"
   },
-  "Comfy_Canvas_PasteFromClipboardWithConnect": {
-    "label": "Paste with Connect"
-  },
   "Comfy_Canvas_ResetView": {
     "label": "Reset View"
   },