feat: remove client-side cache-busting query parameters

Remove getRandParam() and urlWithTimestamp that added cache-busting
query params (&rand=... and &t=...) to output URLs.

This is now handled by the backend generating unique filenames
with timestamps (ComfyUI PR pending).

Updated files:
- app.ts: removed getRandParam() method
- queueStore.ts: removed urlWithTimestamp getter
- imagePreviewStore.ts: removed unused imports
- useCompletionSummary.ts: use .url instead of .urlWithTimestamp
- imageCompare.ts, useMaskEditorLoader.ts, audioUtils.ts,
  Load3dUtils.ts: removed getRandParam() usage

Amp-Thread-ID: https://ampcode.com/threads/T-019c17e5-1c0a-736f-970d-e411aae222fc

.claude/skills/backport-management/SKILL.md

@@ -0,0 +1,150 @@
+---
+name: backport-management
+description: Manages cherry-pick backports across stable release branches. Discovers candidates from Slack/git, analyzes dependencies, resolves conflicts via worktree, and logs results. Use when asked to backport, cherry-pick to stable, manage release branches, do stable branch maintenance, or run a backport session.
+---
+
+# Backport Management
+
+Cherry-pick backport management for Comfy-Org/ComfyUI_frontend stable release branches.
+
+## Quick Start
+
+1. **Discover** — Collect candidates from Slack bot + git log gap (`reference/discovery.md`)
+2. **Analyze** — Categorize MUST/SHOULD/SKIP, check deps (`reference/analysis.md`)
+3. **Plan** — Order by dependency (leaf fixes first), group into waves per branch
+4. **Execute** — Label-driven automation → worktree fallback for conflicts (`reference/execution.md`)
+5. **Verify** — After each wave, verify branch integrity before proceeding
+6. **Log & Report** — Generate session report with mermaid diagram (`reference/logging.md`)
+
+## System Context
+
+| Item           | Value                                             |
+| -------------- | ------------------------------------------------- |
+| Repo           | `~/ComfyUI_frontend` (Comfy-Org/ComfyUI_frontend) |
+| Merge strategy | Squash merge (`gh pr merge --squash --admin`)     |
+| Automation     | `pr-backport.yaml` GitHub Action (label-driven)   |
+| Tracking dir   | `~/temp/backport-session/`                        |
+
+## Branch Scope Rules
+
+**Critical: Match PRs to the correct target branches.**
+
+| Branch prefix | Scope                          | Example                                   |
+| ------------- | ------------------------------ | ----------------------------------------- |
+| `cloud/*`     | Cloud-hosted ComfyUI only      | App mode, cloud auth, cloud-specific UI   |
+| `core/*`      | Local/self-hosted ComfyUI only | Core editor, local workflows, node system |
+
+**⚠️ NEVER backport cloud-only PRs to `core/*` branches.** Cloud-only changes (app mode, cloud auth, cloud billing UI, cloud-specific API calls) are irrelevant to local users and waste effort. Before backporting any PR to a `core/*` branch, check:
+
+- Does the PR title/description mention "app mode", "cloud", or cloud-specific features?
+- Does the PR only touch files like `appModeStore.ts`, cloud auth, or cloud-specific components?
+- If yes → skip for `core/*` branches (may still apply to `cloud/*` branches)
+
+## ⚠️ Gotchas (Learn from Past Sessions)
+
+### Use `gh api` for Labels — NOT `gh pr edit`
+
+`gh pr edit --add-label` triggers Projects Classic deprecation errors. Always use:
+
+```bash
+gh api repos/Comfy-Org/ComfyUI_frontend/issues/$PR/labels \
+  -f "labels[]=needs-backport" -f "labels[]=TARGET_BRANCH"
+```
+
+### Automation Over-Reports Conflicts
+
+The `pr-backport.yaml` action reports more conflicts than reality. `git cherry-pick -m 1` with git auto-merge handles many cases the automation can't. Always attempt manual cherry-pick before skipping.
+
+### Never Skip Based on Conflict File Count
+
+12 or 27 conflicting files can be trivial (snapshots, new files). **Categorize conflicts first**, then decide. See Conflict Triage below.
+
+## Conflict Triage
+
+**Always categorize before deciding to skip. High conflict count ≠ hard conflicts.**
+
+| Type                         | Symptom                              | Resolution                                                      |
+| ---------------------------- | ------------------------------------ | --------------------------------------------------------------- |
+| **Binary snapshots (PNGs)**  | `.png` files in conflict list        | `git checkout --theirs $FILE && git add $FILE` — always trivial |
+| **Modify/delete (new file)** | PR introduces files not on target    | `git add $FILE` — keep the new file                             |
+| **Modify/delete (removed)**  | Target removed files the PR modifies | `git rm $FILE` — file no longer relevant                        |
+| **Content conflicts**        | Marker-based (`<<<<<<<`)             | Accept theirs via python regex (see below)                      |
+| **Add/add**                  | Both sides added same file           | Accept theirs, verify no logic conflict                         |
+| **Locale/JSON files**        | i18n key additions                   | Accept theirs, validate JSON after                              |
+
+```python
+# Accept theirs for content conflicts
+import re
+pattern = r'<<<<<<< HEAD\n(.*?)=======\n(.*?)>>>>>>> [^\n]+\n?'
+content = re.sub(pattern, r'\2', content, flags=re.DOTALL)
+```
+
+### Escalation Triggers (Flag for Human)
+
+- **Package.json/lockfile changes** → skip on stable (transitive dep regression risk)
+- **Core type definition changes** → requires human judgment
+- **Business logic conflicts** (not just imports/exports) → requires domain knowledge
+- **Admin-merged conflict resolutions** → get human review of the resolution before continuing the wave
+
+## Auto-Skip Categories
+
+Skip these without discussion:
+
+- **Dep refresh PRs** — Risk of transitive dep regressions on stable. Cherry-pick individual CVE fixes instead.
+- **CI/tooling changes** — Not user-facing
+- **Test-only / lint rule changes** — Not user-facing
+- **Revert pairs** — If PR A reverted by PR B, skip both. If fixed version (PR C) exists, backport only C.
+- **Features not on target branch** — e.g., Painter, GLSLShader, appModeStore on core/1.40
+- **Cloud-only PRs on core/\* branches** — App mode, cloud auth, cloud billing. These only affect cloud-hosted ComfyUI.
+
+## Wave Verification
+
+After merging each wave of PRs to a target branch, verify branch integrity before proceeding:
+
+```bash
+# Fetch latest state of target branch
+git fetch origin TARGET_BRANCH
+
+# Quick smoke check: does the branch build?
+git worktree add /tmp/verify-TARGET origin/TARGET_BRANCH
+cd /tmp/verify-TARGET
+source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck
+git worktree remove /tmp/verify-TARGET --force
+```
+
+If typecheck fails, stop and investigate before continuing. A broken branch after wave N means all subsequent waves will compound the problem.
+
+## Continuous Backporting Recommendation
+
+Large backport sessions (50+ PRs) are expensive and error-prone. Prefer continuous backporting:
+
+- Backport bug fixes as they merge to main (same day or next day)
+- Use the automation labels immediately after merge
+- Reserve session-style bulk backporting for catching up after gaps
+- When a release branch is created, immediately start the continuous process
+
+## Quick Reference
+
+### Label-Driven Automation (default path)
+
+```bash
+gh api repos/Comfy-Org/ComfyUI_frontend/issues/$PR/labels \
+  -f "labels[]=needs-backport" -f "labels[]=TARGET_BRANCH"
+# Wait 3 min, check: gh pr list --base TARGET_BRANCH --state open
+```
+
+### Manual Worktree Cherry-Pick (conflict fallback)
+
+```bash
+git worktree add /tmp/backport-$BRANCH origin/$BRANCH
+cd /tmp/backport-$BRANCH
+git checkout -b backport-$PR-to-$BRANCH origin/$BRANCH
+git cherry-pick -m 1 $MERGE_SHA
+# Resolve conflicts, push, create PR, merge
+```
+
+### PR Title Convention
+
+```
+[backport TARGET_BRANCH] Original Title (#ORIGINAL_PR)
+```

.claude/skills/backport-management/reference/analysis.md

@@ -0,0 +1,68 @@
+# Analysis & Decision Framework
+
+## Categorization
+
+| Category             | Criteria                                                                                                  | Action                                                                     |
+| -------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| **MUST**             | User-facing bug, crash, data corruption, security. Clear breakage that users will hit.                    | Backport (with deps if needed)                                             |
+| **SHOULD**           | UX improvement, minor bug, small dep chain. No user-visible breakage if skipped, but improves experience. | Backport if clean cherry-pick; defer if conflict resolution is non-trivial |
+| **SKIP**             | CI/tooling, test-only, lint rules, cosmetic, dep refresh                                                  | Skip with documented reason                                                |
+| **NEEDS DISCUSSION** | Large dep chain, unclear risk/benefit, touches core types                                                 | Flag for human                                                             |
+
+### MUST vs SHOULD Decision Guide
+
+When unsure, ask: "If a user on this stable branch reports this issue, would we consider it a bug?"
+
+- **Yes** → MUST. The fix addresses broken behavior.
+- **No, but it's noticeably better** → SHOULD. The fix is a quality-of-life improvement.
+- **No, and it's cosmetic or internal** → SKIP.
+
+For SHOULD items with conflicts: if conflict resolution requires more than trivial accept-theirs patterns (content conflicts in business logic, not just imports), downgrade to SKIP or escalate to NEEDS DISCUSSION.
+
+## Branch Scope Filtering
+
+**Before categorizing, filter by branch scope:**
+
+| Target branch | Skip if PR is...                                                    |
+| ------------- | ------------------------------------------------------------------- |
+| `core/*`      | Cloud-only (app mode, cloud auth, cloud billing, cloud-specific UI) |
+| `cloud/*`     | Local-only features not present on cloud branch                     |
+
+Cloud-only PRs backported to `core/*` are wasted effort — `core/*` branches serve local/self-hosted users who never see cloud features. Check PR titles, descriptions, and files changed for cloud-specific indicators.
+
+## Features Not on Stable Branches
+
+Check before backporting — these don't exist on older branches:
+
+- **Painter** (`src/extensions/core/painter.ts`) — not on core/1.40
+- **GLSLShader** — not on core/1.40
+- **App builder** — check per branch
+- **appModeStore.ts** — not on core/1.40
+
+## Dep Refresh PRs
+
+Always SKIP on stable branches. Risk of transitive dependency regressions outweighs audit cleanup benefit. If a specific CVE fix is needed, cherry-pick that individual fix instead.
+
+## Revert Pairs
+
+If PR A is reverted by PR B:
+
+- Skip BOTH A and B
+- If a fixed version exists (PR C), backport only C
+
+## Dependency Analysis
+
+```bash
+# Find other PRs that touched the same files
+gh pr view $PR --json files --jq '.files[].path' | while read f; do
+  git log --oneline origin/TARGET..$MERGE_SHA -- "$f"
+done
+```
+
+## Human Review Checkpoint
+
+Present decisions.md before execution. Include:
+
+1. All MUST/SHOULD/SKIP categorizations with rationale
+2. Questions for human (feature existence, scope, deps)
+3. Estimated effort per branch

.claude/skills/backport-management/reference/discovery.md

@@ -0,0 +1,42 @@
+# Discovery — Candidate Collection
+
+## Source 1: Slack Backport-Checker Bot
+
+Use `slackdump` skill to export `#frontend-releases` channel (C09K9TPU2G7):
+
+```bash
+slackdump export -o ~/slack-exports/frontend-releases.zip C09K9TPU2G7
+```
+
+Parse bot messages for PRs flagged "Might need backport" per release version.
+
+## Source 2: Git Log Gap Analysis
+
+```bash
+# Count gap
+git log --oneline origin/TARGET..origin/main | wc -l
+
+# List gap commits
+git log --oneline origin/TARGET..origin/main
+
+# Check if a PR is already on target
+git log --oneline origin/TARGET --grep="#PR_NUMBER"
+
+# Check for existing backport PRs
+gh pr list --base TARGET --state all --search "backport PR_NUMBER"
+```
+
+## Source 3: GitHub PR Details
+
+```bash
+# Get merge commit SHA
+gh pr view $PR --json mergeCommit,title --jq '"Title: \(.title)\nMerge: \(.mergeCommit.oid)"'
+
+# Get files changed
+gh pr view $PR --json files --jq '.files[].path'
+```
+
+## Output: candidate_list.md
+
+Table per target branch:
+| PR# | Title | Category | Flagged by Bot? | Decision |

.claude/skills/backport-management/reference/execution.md

@@ -0,0 +1,150 @@
+# Execution Workflow
+
+## Per-Branch Execution Order
+
+1. Smallest gap first (validation run)
+2. Medium gap next (quick win)
+3. Largest gap last (main effort)
+
+## Step 1: Label-Driven Automation (Batch)
+
+```bash
+# Add labels to all candidates for a target branch
+for pr in $PR_LIST; do
+  gh api repos/Comfy-Org/ComfyUI_frontend/issues/$pr/labels \
+    -f "labels[]=needs-backport" -f "labels[]=TARGET_BRANCH" --silent
+  sleep 2
+done
+
+# Wait 3 minutes for automation
+sleep 180
+
+# Check which got auto-PRs
+gh pr list --base TARGET_BRANCH --state open --limit 50 --json number,title
+```
+
+## Step 2: Review & Merge Clean Auto-PRs
+
+```bash
+for pr in $AUTO_PRS; do
+  # Check size
+  gh pr view $pr --json title,additions,deletions,changedFiles \
+    --jq '"Files: \(.changedFiles), +\(.additions)/-\(.deletions)"'
+  # Admin merge
+  gh pr merge $pr --squash --admin
+  sleep 3
+done
+```
+
+## Step 3: Manual Worktree for Conflicts
+
+```bash
+git fetch origin TARGET_BRANCH
+git worktree add /tmp/backport-TARGET origin/TARGET_BRANCH
+cd /tmp/backport-TARGET
+
+for PR in ${CONFLICT_PRS[@]}; do
+  # Refresh target ref so each branch is based on current HEAD
+  git fetch origin TARGET_BRANCH
+  git checkout origin/TARGET_BRANCH
+
+  git checkout -b backport-$PR-to-TARGET origin/TARGET_BRANCH
+  git cherry-pick -m 1 $MERGE_SHA
+
+  # If conflict — NEVER skip based on file count alone!
+  # Categorize conflicts first: binary PNGs, modify/delete, content, add/add
+  # See SKILL.md Conflict Triage table for resolution per type.
+
+  # Resolve all conflicts, then:
+  git add .
+  GIT_EDITOR=true git cherry-pick --continue
+
+  git push origin backport-$PR-to-TARGET
+  NEW_PR=$(gh pr create --base TARGET_BRANCH --head backport-$PR-to-TARGET \
+    --title "[backport TARGET] TITLE (#$PR)" \
+    --body "Backport of #$PR..." | grep -oP '\d+$')
+  gh pr merge $NEW_PR --squash --admin
+  sleep 3
+done
+
+# Cleanup
+cd -
+git worktree remove /tmp/backport-TARGET --force
+```
+
+**⚠️ Human review for conflict resolutions:** When admin-merging a PR where you manually resolved conflicts (especially content conflicts beyond trivial accept-theirs), pause and present the resolution diff to the human for review before merging. Trivial resolutions (binary snapshots, modify/delete, locale key additions) can proceed without review.
+
+## Step 4: Wave Verification
+
+After completing all PRs in a wave for a target branch:
+
+```bash
+git fetch origin TARGET_BRANCH
+git worktree add /tmp/verify-TARGET origin/TARGET_BRANCH
+cd /tmp/verify-TARGET
+source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck
+git worktree remove /tmp/verify-TARGET --force
+```
+
+If verification fails, stop and fix before proceeding to the next wave. Do not compound problems across waves.
+
+## Conflict Resolution Patterns
+
+### 1. Content Conflicts (accept theirs)
+
+```python
+import re
+pattern = r'<<<<<<< HEAD\n(.*?)=======\n(.*?)>>>>>>> [^\n]+\n?'
+content = re.sub(pattern, r'\2', content, flags=re.DOTALL)
+```
+
+### 2. Modify/Delete (two cases!)
+
+```bash
+# Case A: PR introduces NEW files not on target → keep them
+git add $FILE
+
+# Case B: Target REMOVED files the PR modifies → drop them
+git rm $FILE
+```
+
+### 3. Binary Files (snapshots)
+
+```bash
+git checkout --theirs $FILE && git add $FILE
+```
+
+### 4. Locale Files
+
+Usually adding new i18n keys — accept theirs, validate JSON:
+
+```bash
+python3 -c "import json; json.load(open('src/locales/en/main.json'))" && echo "Valid"
+```
+
+## Merge Conflicts After Other Merges
+
+When merging multiple PRs to the same branch, later PRs may conflict with earlier merges:
+
+```bash
+git fetch origin TARGET_BRANCH
+git rebase origin/TARGET_BRANCH
+# Resolve new conflicts
+git push --force origin backport-$PR-to-TARGET
+sleep 20  # Wait for GitHub to recompute merge state
+gh pr merge $PR --squash --admin
+```
+
+## Lessons Learned
+
+1. **Automation reports more conflicts than reality** — `cherry-pick -m 1` with git auto-merge handles many "conflicts" the automation can't
+2. **Never skip based on conflict file count** — 12 or 27 conflicts can be trivial (snapshots, new files). Categorize first: binary PNGs, modify/delete, content, add/add.
+3. **Modify/delete goes BOTH ways** — if the PR introduces new files (not on target), `git add` them. If target deleted files the PR modifies, `git rm`.
+4. **Binary snapshot PNGs** — always `git checkout --theirs && git add`. Never skip a PR just because it has many snapshot conflicts.
+5. **Batch label additions need 2s delay** between API calls to avoid rate limits
+6. **Merging 6+ PRs rapidly** can cause later PRs to become unmergeable — wait 20-30s for GitHub to recompute merge state
+7. **appModeStore.ts, painter files, GLSLShader files** don't exist on core/1.40 — `git rm` these
+8. **Always validate JSON** after resolving locale file conflicts
+9. **Dep refresh PRs** — skip on stable branches. Risk of transitive dep regressions outweighs audit cleanup. Cherry-pick individual CVE fixes instead.
+10. **Verify after each wave** — run `pnpm typecheck` on the target branch after merging a batch. Catching breakage early prevents compounding errors.
+11. **Cloud-only PRs don't belong on core/\* branches** — app mode, cloud auth, and cloud-specific UI changes are irrelevant to local users. Always check PR scope against branch scope before backporting.

.claude/skills/backport-management/reference/logging.md

@@ -0,0 +1,96 @@
+# Logging & Session Reports
+
+## During Execution
+
+Maintain `execution-log.md` with per-branch tables:
+
+```markdown
+| PR#   | Title | Status                            | Backport PR | Notes   |
+| ----- | ----- | --------------------------------- | ----------- | ------- |
+| #XXXX | Title | ✅ Merged / ⏭️ Skip / ⏸️ Deferred | #YYYY       | Details |
+```
+
+## Wave Verification Log
+
+Track verification results per wave:
+
+```markdown
+## Wave N Verification — TARGET_BRANCH
+
+- PRs merged: #A, #B, #C
+- Typecheck: ✅ Pass / ❌ Fail
+- Issues found: (if any)
+- Human review needed: (list any non-trivial conflict resolutions)
+```
+
+## Session Report Template
+
+```markdown
+# Backport Session Report
+
+## Summary
+
+| Branch | Candidates | Merged | Skipped | Deferred | Rate |
+| ------ | ---------- | ------ | ------- | -------- | ---- |
+
+## Deferred Items (Needs Human)
+
+| PR# | Title | Branch | Issue |
+
+## Conflict Resolutions Requiring Review
+
+| PR# | Branch | Conflict Type | Resolution Summary |
+
+## Automation Performance
+
+| Metric                      | Value |
+| --------------------------- | ----- |
+| Auto success rate           | X%    |
+| Manual resolution rate      | X%    |
+| Overall clean rate          | X%    |
+| Wave verification pass rate | X%    |
+
+## Process Recommendations
+
+- Were there clusters of related PRs that should have been backported together?
+- Any PRs that should have been backported sooner (continuous backporting candidates)?
+- Feature branches that need tracking for future sessions?
+```
+
+## Final Deliverable: Visual Summary
+
+At session end, generate a **mermaid diagram** showing all backported PRs organized by target branch and category (MUST/SHOULD), plus a summary table. Present this to the user as the final output.
+
+```mermaid
+graph TD
+    subgraph branch1["☁️ cloud/X.XX — N PRs"]
+        C1["#XXXX title"]
+        C2["#XXXX title"]
+    end
+
+    subgraph branch2must["🔴 core/X.XX MUST — N PRs"]
+        M1["#XXXX title"]
+    end
+
+    subgraph branch2should["🟡 core/X.XX SHOULD — N PRs"]
+        S1["#XXXX-#XXXX N auto-merged"]
+        S2["#XXXX-#XXXX N manual picks"]
+    end
+
+    classDef cloudStyle fill:#1a3a5c,stroke:#4da6ff,color:#e0f0ff
+    classDef coreStyle fill:#1a4a2e,stroke:#4dff88,color:#e0ffe8
+    classDef mustStyle fill:#5c1a1a,stroke:#ff4d4d,color:#ffe0e0
+    classDef shouldStyle fill:#4a3a1a,stroke:#ffcc4d,color:#fff5e0
+```
+
+Use the `mermaid` tool to render this diagram and present it alongside the summary table as the session's final deliverable.
+
+## Files to Track
+
+- `candidate_list.md` — all candidates per branch
+- `decisions.md` — MUST/SHOULD/SKIP with rationale
+- `wave-plan.md` — execution order
+- `execution-log.md` — real-time status
+- `backport-session-report.md` — final summary
+
+All in `~/temp/backport-session/`.

.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: lts/*
+          node-version-file: '.nvmrc'
           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: lts/*
+          node-version-file: '.nvmrc'
           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: lts/*
+          node-version-file: '.nvmrc'
           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: 'lts/*'
+          node-version-file: '.nvmrc'
           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: 'lts/*'
+          node-version-file: '.nvmrc'
           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: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -4,6 +4,8 @@ name: 'CI: Tests Storybook'
 on:
   workflow_dispatch: # Allow manual triggering
   pull_request:
+  push:
+    branches: [main]
 
 jobs:
   # Post starting comment for non-forked PRs
@@ -138,6 +140,29 @@ jobs:
             "${{ github.head_ref }}" \
             "completed"
 
+  # Deploy Storybook to production URL on main branch push
+  deploy-production:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+
+      - name: Build Storybook
+        run: pnpm build-storybook
+
+      - name: Deploy to Cloudflare Pages (production)
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+        run: |
+          npx wrangler@^4.0.0 pages deploy storybook-static \
+            --project-name=comfy-storybook \
+            --branch=main
+
   # Update comment with Chromatic URLs for version-bump branches
   update-comment-with-chromatic:
     needs: [chromatic-deployment, deploy-and-comment]

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

@@ -14,7 +14,7 @@ on:
       - 'cloud/*'
       - 'main'
   pull_request:
-    types: [labeled]
+    types: [labeled, synchronize]
   workflow_dispatch:
 
 permissions: {}
@@ -26,11 +26,18 @@ concurrency:
 jobs:
   dispatch:
     # Fork guard: prevent forks from dispatching to the cloud repo.
-    # For pull_request events, only dispatch when the 'preview' label is added.
+    # 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.
     if: >
       github.repository == 'Comfy-Org/ComfyUI_frontend' &&
       (github.event_name != 'pull_request' ||
-       github.event.label.name == 'preview')
+       (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'))))
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload
@@ -39,6 +46,10 @@ jobs:
           EVENT_NAME: ${{ github.event_name }}
           PR_HEAD_SHA: ${{ github.event.pull_request.head.sha }}
           PR_HEAD_REF: ${{ github.event.pull_request.head.ref }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          ACTION: ${{ github.event.action }}
+          LABEL_NAME: ${{ github.event.label.name }}
+          PR_LABELS: ${{ toJson(github.event.pull_request.labels.*.name) }}
         run: |
           if [ "${EVENT_NAME}" = "pull_request" ]; then
             REF="${PR_HEAD_SHA}"
@@ -50,11 +61,15 @@ jobs:
           else
             REF="${GITHUB_SHA}"
             BRANCH="${GITHUB_REF_NAME}"
+            PR_NUMBER=""
+            VARIANT=""
           fi
           payload="$(jq -nc \
             --arg ref "${REF}" \
             --arg branch "${BRANCH}" \
-            '{ref: $ref, branch: $branch}')"
+            --arg pr_number "${PR_NUMBER}" \
+            --arg variant "${VARIANT}" \
+            '{ref: $ref, branch: $branch, pr_number: $pr_number, variant: $variant}')"
           echo "json=${payload}" >> "${GITHUB_OUTPUT}"
 
       - name: Dispatch to cloud repo

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

@@ -0,0 +1,39 @@
+---
+# Dispatches a frontend-preview-cleanup event to the cloud repo when a
+# frontend PR with a preview label is closed or has its preview label
+# removed. The cloud repo handles the actual environment teardown.
+#
+# This is fire-and-forget — it does NOT wait for the cloud workflow to
+# complete. Status is visible in the cloud repo's Actions tab.
+
+name: Cloud Frontend Preview Cleanup Dispatch
+
+on:
+  pull_request:
+    types: [closed, unlabeled]
+
+permissions: {}
+
+jobs:
+  dispatch:
+    # Only dispatch when:
+    # - PR closed AND had a preview label
+    # - Preview label specifically removed
+    if: >
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      ((github.event.action == 'closed' &&
+        (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.action == 'unlabeled' &&
+        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)))
+    runs-on: ubuntu-latest
+    steps:
+      - name: Dispatch to cloud repo
+        uses: peter-evans/repository-dispatch@28959ce8df70de7be546dd1250a005dd32156697 # v4.0.1
+        with:
+          token: ${{ secrets.CLOUD_DISPATCH_TOKEN }}
+          repository: Comfy-Org/cloud
+          event-type: frontend-preview-cleanup
+          client-payload: >-
+            {"pr_number": "${{ github.event.pull_request.number }}"}

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

@@ -36,7 +36,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '20'
+          node-version-file: '.nvmrc'
           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: 22
+          node-version-file: '.nvmrc'
 
       - 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: '24.x'
+          node-version-file: '.nvmrc'
 
       - 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: '24.x'
+          node-version-file: '.nvmrc'
           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: lts/*
+          node-version-file: 'frontend/.nvmrc'
 
       - 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: 'lts/*'
+          node-version-file: '.nvmrc'
 
       - 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: 'lts/*'
+          node-version-file: '.nvmrc'
           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: 'lts/*'
+          node-version-file: '.nvmrc'
           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: 'lts/*'
+          node-version-file: '.nvmrc'
           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: lts/*
+          node-version-file: '.nvmrc'
 
       - 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: '24.x'
+          node-version-file: '.nvmrc'
           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: '20'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

.storybook/preview.ts

@@ -58,7 +58,7 @@ export const withTheme = (Story: StoryFn, context: StoryContext) => {
     document.documentElement.classList.remove('dark-theme')
     document.body.classList.remove('dark-theme')
   }
-  document.body.classList.add('[&_*]:!font-inter')
+  document.body.classList.add('font-inter')
 
   return Story(context.args, context)
 }

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 (v24) and pnpm
+  - Node.js (see `.nvmrc`, currently v24) and pnpm
   - Git for version control
   - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 

browser_tests/README.md

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

browser_tests/tests/dialog.spec.ts

@@ -333,7 +333,7 @@ test.describe('Settings', () => {
     await editKeybindingButton.click()
 
     // Set new keybinding
-    const input = comfyPage.page.getByPlaceholder('Press keys for new binding')
+    const input = comfyPage.page.getByPlaceholder('Enter your keybind')
     await input.press('Alt+n')
 
     const requestPromise = comfyPage.page.waitForRequest(
@@ -345,7 +345,7 @@ test.describe('Settings', () => {
 
     // Save keybinding
     const saveButton = comfyPage.page
-      .getByLabel('New Blank Workflow')
+      .getByLabel('Modify keybinding')
       .getByText('Save')
     await saveButton.click()
 

browser_tests/tests/groupCopyPaste.spec.ts

@@ -1,44 +0,0 @@
-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/rendererToggleStability.spec.ts

@@ -1,104 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import type { Position } from '../fixtures/types'
-
-type NodeSnapshot = { id: number } & Position
-
-async function getAllNodePositions(
-  comfyPage: ComfyPage
-): Promise<NodeSnapshot[]> {
-  return comfyPage.page.evaluate(() =>
-    window.app!.graph.nodes.map((n) => ({
-      id: n.id as number,
-      x: n.pos[0],
-      y: n.pos[1]
-    }))
-  )
-}
-
-async function getNodePosition(
-  comfyPage: ComfyPage,
-  nodeId: number
-): Promise<Position | undefined> {
-  return comfyPage.page.evaluate((targetNodeId) => {
-    const node = window.app!.graph.nodes.find((n) => n.id === targetNodeId)
-    if (!node) return
-
-    return {
-      x: node.pos[0],
-      y: node.pos[1]
-    }
-  }, nodeId)
-}
-
-async function expectNodePositionStable(
-  comfyPage: ComfyPage,
-  initial: NodeSnapshot,
-  mode: string
-) {
-  await expect
-    .poll(
-      async () => {
-        const current = await getNodePosition(comfyPage, initial.id)
-        return current?.x ?? Number.NaN
-      },
-      { message: `node ${initial.id} x drifted in ${mode} mode` }
-    )
-    .toBeCloseTo(initial.x, 1)
-
-  await expect
-    .poll(
-      async () => {
-        const current = await getNodePosition(comfyPage, initial.id)
-        return current?.y ?? Number.NaN
-      },
-      { message: `node ${initial.id} y drifted in ${mode} mode` }
-    )
-    .toBeCloseTo(initial.y, 1)
-}
-
-async function setVueMode(comfyPage: ComfyPage, enabled: boolean) {
-  await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', enabled)
-  if (enabled) {
-    await comfyPage.vueNodes.waitForNodes()
-  }
-  await comfyPage.nextFrame()
-}
-
-test.describe(
-  'Renderer toggle stability',
-  { tag: ['@node', '@canvas'] },
-  () => {
-    test('node positions do not drift when toggling between Vue and LiteGraph renderers', async ({
-      comfyPage
-    }) => {
-      const TOGGLE_COUNT = 5
-
-      const initialPositions = await getAllNodePositions(comfyPage)
-      expect(initialPositions.length).toBeGreaterThan(0)
-
-      for (let i = 0; i < TOGGLE_COUNT; i++) {
-        await setVueMode(comfyPage, true)
-        for (const initial of initialPositions) {
-          await expectNodePositionStable(
-            comfyPage,
-            initial,
-            `Vue toggle ${i + 1}`
-          )
-        }
-
-        await setVueMode(comfyPage, false)
-        for (const initial of initialPositions) {
-          await expectNodePositionStable(
-            comfyPage,
-            initial,
-            `LiteGraph toggle ${i + 1}`
-          )
-        }
-      }
-    })
-  }
-)

browser_tests/tests/subgraphProgressClear.spec.ts

@@ -1,77 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe(
-  'Subgraph progress clear on navigation',
-  { tag: ['@subgraph'] },
-  () => {
-    test('Stale progress is cleared on subgraph node after navigating back', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      // Find the subgraph node
-      const subgraphNodeId = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph!
-        const subgraphNode = graph.nodes.find(
-          (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-        )
-        return subgraphNode ? String(subgraphNode.id) : null
-      })
-      expect(subgraphNodeId).not.toBeNull()
-
-      // Simulate a stale progress value on the subgraph node.
-      // This happens when:
-      //   1. User views root graph during execution
-      //   2. Progress watcher sets node.progress = 0.5
-      //   3. User enters subgraph
-      //   4. Execution completes (nodeProgressStates becomes {})
-      //   5. Watcher fires, clears subgraph-internal nodes, but root-level
-      //      SubgraphNode isn't visible so it keeps stale progress
-      //   6. User navigates back — watcher should fire and clear it
-      await comfyPage.page.evaluate((nodeId) => {
-        const node = window.app!.canvas.graph!.getNodeById(nodeId)!
-        node.progress = 0.5
-      }, subgraphNodeId!)
-
-      // Verify progress is set
-      const progressBefore = await comfyPage.page.evaluate((nodeId) => {
-        return window.app!.canvas.graph!.getNodeById(nodeId)!.progress
-      }, subgraphNodeId!)
-      expect(progressBefore).toBe(0.5)
-
-      // Navigate into the subgraph
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById(
-        subgraphNodeId!
-      )
-      await subgraphNode.navigateIntoSubgraph()
-
-      // Verify we're inside the subgraph
-      const inSubgraph = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        return !!graph && 'inputNode' in graph
-      })
-      expect(inSubgraph).toBe(true)
-
-      // Navigate back to the root graph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      // The progress watcher should fire when graph changes (because
-      // nodeLocationProgressStates is empty {} and the watcher should
-      // iterate canvas.graph.nodes to clear stale node.progress values).
-      //
-      // BUG: Without watching canvasStore.currentGraph, the watcher doesn't
-      // fire on subgraph->root navigation when progress is already empty,
-      // leaving stale node.progress = 0.5 on the SubgraphNode.
-      await expect(async () => {
-        const progressAfter = await comfyPage.page.evaluate((nodeId) => {
-          return window.app!.canvas.graph!.getNodeById(nodeId)!.progress
-        }, subgraphNodeId!)
-        expect(progressAfter).toBeUndefined()
-      }).toPass({ timeout: 2_000 })
-    })
-  }
-)

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

@@ -1,102 +0,0 @@
-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/architecture/change-tracker.md

@@ -0,0 +1,91 @@
+# Change Tracker (Undo/Redo System)
+
+The `ChangeTracker` class (`src/scripts/changeTracker.ts`) manages undo/redo
+history by comparing serialized graph snapshots.
+
+## How It Works
+
+`checkState()` is the core method. It:
+
+1. Serializes the current graph via `app.rootGraph.serialize()`
+2. Deep-compares the result against the last known `activeState`
+3. If different, pushes `activeState` onto `undoQueue` and replaces it
+
+**It is not reactive.** Changes to the graph (widget values, node positions,
+links, etc.) are only captured when `checkState()` is explicitly triggered.
+
+## Automatic Triggers
+
+These are set up once in `ChangeTracker.init()`:
+
+| Trigger                             | Event / Hook                                       | What It Catches                                     |
+| ----------------------------------- | -------------------------------------------------- | --------------------------------------------------- |
+| Keyboard (non-modifier, non-repeat) | `window` `keydown`                                 | Shortcuts, typing in canvas                         |
+| Modifier key release                | `window` `keyup`                                   | Releasing Ctrl/Shift/Alt/Meta                       |
+| Mouse click                         | `window` `mouseup`                                 | General clicks on native DOM                        |
+| Canvas mouse up                     | `LGraphCanvas.processMouseUp` override             | LiteGraph canvas interactions                       |
+| Number/string dialog                | `LGraphCanvas.prompt` override                     | Dialog popups for editing widgets                   |
+| Context menu close                  | `LiteGraph.ContextMenu.close` override             | COMBO widget menus in LiteGraph                     |
+| Active input element                | `bindInput` (change/input/blur on focused element) | Native HTML input edits                             |
+| Prompt queued                       | `api` `promptQueued` event                         | Dynamic widget changes on queue                     |
+| Graph cleared                       | `api` `graphCleared` event                         | Full graph clear                                    |
+| Transaction end                     | `litegraph:canvas` `after-change` event            | Batched operations via `beforeChange`/`afterChange` |
+
+## When You Must Call `checkState()` Manually
+
+The automatic triggers above are designed around LiteGraph's native DOM
+rendering. They **do not cover**:
+
+- **Vue-rendered widgets** — Vue handles events internally without triggering
+  native DOM events that the tracker listens to (e.g., `mouseup` on a Vue
+  dropdown doesn't bubble the same way as a native LiteGraph widget click)
+- **Programmatic graph mutations** — Any code that modifies the graph outside
+  of user interaction (e.g., applying a template, pasting nodes, aligning)
+- **Async operations** — File uploads, API calls that change widget values
+  after the initial user gesture
+
+### Pattern for Manual Calls
+
+```typescript
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+
+// After mutating the graph:
+useWorkflowStore().activeWorkflow?.changeTracker?.checkState()
+```
+
+### Existing Manual Call Sites
+
+These locations already call `checkState()` explicitly:
+
+- `WidgetSelectDropdown.vue` — After dropdown selection and file upload
+- `ColorPickerButton.vue` — After changing node colors
+- `NodeSearchBoxPopover.vue` — After adding a node from search
+- `useAppSetDefaultView.ts` — After setting default view
+- `useSelectionOperations.ts` — After align, copy, paste, duplicate, group
+- `useSelectedNodeActions.ts` — After pin, bypass, collapse
+- `useGroupMenuOptions.ts` — After group operations
+- `useSubgraphOperations.ts` — After subgraph enter/exit
+- `useCanvasRefresh.ts` — After canvas refresh
+- `useCoreCommands.ts` — After metadata/subgraph commands
+- `workflowService.ts` — After workflow service operations
+
+## Transaction Guards
+
+For operations that make multiple changes that should be a single undo entry:
+
+```typescript
+changeTracker.beforeChange()
+// ... multiple graph mutations ...
+changeTracker.afterChange() // calls checkState() when nesting count hits 0
+```
+
+The `litegraph:canvas` custom event also supports this with `before-change` /
+`after-change` sub-types.
+
+## Key Invariants
+
+- `checkState()` is a no-op during `loadGraphData` (guarded by
+  `isLoadingGraph`) to prevent cross-workflow corruption
+- `checkState()` is a no-op when `changeCount > 0` (inside a transaction)
+- `undoQueue` is capped at 50 entries (`MAX_HISTORY`)
+- `graphEqual` ignores node order and `ds` (pan/zoom) when comparing

docs/release-process.md

@@ -0,0 +1,62 @@
+# 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,7 +24,6 @@ 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,5 +1,4 @@
 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

knip.config.ts

@@ -20,6 +20,10 @@ const config: KnipConfig = {
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']
     },
+    'packages/shared-frontend-utils': {
+      project: ['src/**/*.{js,ts}'],
+      entry: ['src/formatUtil.ts', 'src/networkUtil.ts']
+    },
     'packages/registry-types': {
       project: ['src/**/*.{js,ts}']
     }
@@ -32,7 +36,9 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons'
+    '@primevue/icons',
+    // Used by lucideStrokePlugin.js (CSS @plugin)
+    '@iconify/utils'
   ],
   ignore: [
     // Auto generated manager types
@@ -47,7 +53,9 @@ const config: KnipConfig = {
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
     // Agent review check config, not part of the build
-    '.agents/checks/eslint.strict.config.js'
+    '.agents/checks/eslint.strict.config.js',
+    // Loaded via @plugin directive in CSS, not detected by knip
+    'packages/design-system/src/css/lucideStrokePlugin.js'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.13",
+  "version": "1.42.3",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -195,6 +195,9 @@
     "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,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}]");
+@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}]");
 
 /* 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

@@ -1 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-<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/App.vue

@@ -2,20 +2,13 @@
   <router-view />
   <GlobalDialog />
   <BlockUI full-screen :blocked="isLoading" />
-  <div
-    v-if="isLoading"
-    class="pointer-events-none fixed inset-0 z-1200 flex items-center justify-center"
-  >
-    <LogoComfyWaveLoader size="xl" color="yellow" />
-  </div>
 </template>
 
 <script setup lang="ts">
 import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, watch } from 'vue'
 
-import LogoComfyWaveLoader from '@/components/loader/LogoComfyWaveLoader.vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -31,6 +24,16 @@ app.extensionManager = useWorkspaceStore()
 const conflictDetection = useConflictDetection()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
 
+watch(
+  isLoading,
+  (loading, prevLoading) => {
+    if (prevLoading && !loading) {
+      document.getElementById('splash-loader')?.remove()
+    }
+  },
+  { flush: 'post' }
+)
+
 const showContextMenu = (event: MouseEvent) => {
   const { target } = event
   switch (true) {

src/components/TopMenuSection.test.ts

@@ -78,14 +78,6 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
   }))
 }))
 
-vi.mock('@/scripts/app', () => ({
-  app: {
-    menu: {
-      element: document.createElement('div')
-    }
-  }
-}))
-
 type WrapperOptions = {
   pinia?: ReturnType<typeof createTestingPinia>
   stubs?: Record<string, boolean | Component>
@@ -139,18 +131,6 @@ function createWrapper({
   })
 }
 
-function getLegacyCommandsContainer(
-  wrapper: ReturnType<typeof createWrapper>
-): HTMLElement {
-  const legacyContainer = wrapper.find(
-    '[data-testid="legacy-topbar-container"]'
-  ).element
-  if (!(legacyContainer instanceof HTMLElement)) {
-    throw new Error('Expected legacy commands container to be present')
-  }
-  return legacyContainer
-}
-
 function createJob(id: string, status: JobStatus): JobListItem {
   return {
     id,
@@ -535,69 +515,4 @@ describe('TopMenuSection', () => {
 
     expect(wrapper.find('span.bg-red-500').exists()).toBe(true)
   })
-
-  it('coalesces legacy topbar mutation scans to one check per frame', async () => {
-    localStorage.setItem('Comfy.MenuPosition.Docked', 'false')
-
-    const rafCallbacks: FrameRequestCallback[] = []
-    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
-      rafCallbacks.push(cb)
-      return rafCallbacks.length
-    })
-    vi.stubGlobal('cancelAnimationFrame', vi.fn())
-
-    const pinia = createTestingPinia({ createSpy: vi.fn })
-    const settingStore = useSettingStore(pinia)
-    vi.mocked(settingStore.get).mockImplementation((key) => {
-      if (key === 'Comfy.UseNewMenu') return 'Top'
-      if (key === 'Comfy.UI.TabBarLayout') return 'Integrated'
-      if (key === 'Comfy.RightSidePanel.IsOpen') return true
-      return undefined
-    })
-
-    const wrapper = createWrapper({ pinia, attachTo: document.body })
-
-    try {
-      await nextTick()
-
-      const actionbarContainer = wrapper.find('.actionbar-container')
-      expect(actionbarContainer.classes()).toContain('w-0')
-
-      const legacyContainer = getLegacyCommandsContainer(wrapper)
-      const querySpy = vi.spyOn(legacyContainer, 'querySelector')
-
-      if (rafCallbacks.length > 0) {
-        const initialCallbacks = [...rafCallbacks]
-        rafCallbacks.length = 0
-        initialCallbacks.forEach((callback) => callback(0))
-        await nextTick()
-      }
-      querySpy.mockClear()
-      querySpy.mockReturnValue(document.createElement('div'))
-
-      for (let index = 0; index < 3; index++) {
-        const outer = document.createElement('div')
-        const inner = document.createElement('div')
-        inner.textContent = `legacy-${index}`
-        outer.appendChild(inner)
-        legacyContainer.appendChild(outer)
-      }
-
-      await vi.waitFor(() => {
-        expect(rafCallbacks.length).toBeGreaterThan(0)
-      })
-      expect(querySpy).not.toHaveBeenCalled()
-
-      const callbacks = [...rafCallbacks]
-      rafCallbacks.length = 0
-      callbacks.forEach((callback) => callback(0))
-      await nextTick()
-
-      expect(querySpy).toHaveBeenCalledTimes(1)
-      expect(actionbarContainer.classes()).toContain('px-2')
-    } finally {
-      wrapper.unmount()
-      vi.unstubAllGlobals()
-    }
-  })
 })

src/components/TopMenuSection.vue

@@ -39,7 +39,6 @@
             <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
             <div
               ref="legacyCommandsContainerRef"
-              data-testid="legacy-topbar-container"
               class="[&:not(:has(*>*:not(:empty)))]:hidden"
             ></div>
 
@@ -287,7 +286,6 @@ onMounted(() => {
   if (legacyCommandsContainerRef.value) {
     app.menu.element.style.width = 'fit-content'
     legacyCommandsContainerRef.value.appendChild(app.menu.element)
-    checkLegacyContent()
   }
 })
 

src/components/bottomPanel/BottomPanel.vue

@@ -25,15 +25,13 @@
                   class: {
                     'p-3 rounded-lg': true,
                     'pointer-events-none':
-                      bottomPanelStore.bottomPanelTabs.length === 1
-                  },
-                  style: {
-                    color: 'var(--fg-color)',
-                    backgroundColor:
+                      bottomPanelStore.bottomPanelTabs.length === 1,
+                    'bg-secondary-background text-secondary-foreground':
+                      x.context.active &&
+                      bottomPanelStore.bottomPanelTabs.length > 1,
+                    'text-muted-foreground':
                       !x.context.active ||
-                      bottomPanelStore.bottomPanelTabs.length === 1
-                        ? ''
-                        : 'var(--bg-color)'
+                      bottomPanelStore.bottomPanelTabs.length <= 1
                   }
                 })
               "
@@ -127,4 +125,8 @@ const closeBottomPanel = () => {
 :deep(.p-tablist-active-bar) {
   display: none;
 }
+
+:deep(.p-tab-active) {
+  color: inherit;
+}
 </style>

src/components/common/ScrubableNumberInput.stories.ts

@@ -0,0 +1,160 @@
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj
+} from '@storybook/vue3-vite'
+import { ref, toRefs } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+import Popover from '@/components/ui/Popover.vue'
+
+import ScrubableNumberInput from './ScrubableNumberInput.vue'
+
+type StoryArgs = ComponentPropsAndSlots<typeof ScrubableNumberInput>
+
+const meta: Meta<StoryArgs> = {
+  title: 'Components/Input/Number',
+  component: ScrubableNumberInput,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+    disabled: { control: 'boolean' },
+    hideButtons: { control: 'boolean' }
+  },
+  args: {
+    min: 0,
+    max: 100,
+    step: 1,
+    disabled: false,
+    hideButtons: false
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div class="w-60"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { ScrubableNumberInput },
+    setup() {
+      const { min, max, step, disabled, hideButtons } = toRefs(args)
+      const value = ref(42)
+      return { value, min, max, step, disabled, hideButtons }
+    },
+    template:
+      '<ScrubableNumberInput v-model="value" :min :max :step :disabled :hideButtons />'
+  })
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => ({
+    components: { ScrubableNumberInput },
+    setup() {
+      const { disabled } = toRefs(args)
+      const value = ref(50)
+      return { value, disabled }
+    },
+    template:
+      '<ScrubableNumberInput v-model="value" :min="0" :max="100" :step="1" :disabled />'
+  })
+}
+
+export const AtMinimum: Story = {
+  render: () => ({
+    components: { ScrubableNumberInput },
+    setup() {
+      const value = ref(0)
+      return { value }
+    },
+    template:
+      '<ScrubableNumberInput v-model="value" :min="0" :max="100" :step="1" />'
+  })
+}
+
+export const AtMaximum: Story = {
+  render: () => ({
+    components: { ScrubableNumberInput },
+    setup() {
+      const value = ref(100)
+      return { value }
+    },
+    template:
+      '<ScrubableNumberInput v-model="value" :min="0" :max="100" :step="1" />'
+  })
+}
+
+export const FloatPrecision: Story = {
+  args: { min: 0, max: 1, step: 0.01 },
+  render: (args) => ({
+    components: { ScrubableNumberInput },
+    setup() {
+      const { min, max, step } = toRefs(args)
+      const value = ref(0.75)
+      return { value, min, max, step }
+    },
+    template:
+      '<ScrubableNumberInput v-model="value" :min :max :step display-value="0.75" />'
+  })
+}
+
+export const LargeNumber: Story = {
+  render: () => ({
+    components: { ScrubableNumberInput },
+    setup() {
+      const value = ref(1809000312992)
+      return { value }
+    },
+    template:
+      '<ScrubableNumberInput v-model="value" :min="0" :max="Number.MAX_SAFE_INTEGER" :step="1" />'
+  })
+}
+
+export const HiddenButtons: Story = {
+  args: { hideButtons: true },
+  render: (args) => ({
+    components: { ScrubableNumberInput },
+    setup() {
+      const { hideButtons } = toRefs(args)
+      const value = ref(42)
+      return { value, hideButtons }
+    },
+    template:
+      '<ScrubableNumberInput v-model="value" :min="0" :max="100" :step="1" :hideButtons />'
+  })
+}
+
+export const WithControlButton: Story = {
+  render: () => ({
+    components: { ScrubableNumberInput, Button, Popover },
+    setup() {
+      const value = ref(1809000312992)
+      return { value }
+    },
+    template: `
+      <ScrubableNumberInput v-model="value" :min="0" :max="Number.MAX_SAFE_INTEGER" :step="1">
+        <Popover>
+          <template #button>
+            <Button
+              variant="textonly"
+              size="sm"
+              class="h-4 w-7 self-center rounded-xl bg-primary-background/30 p-0 hover:bg-primary-background-hover/30"
+            >
+              <i class="icon-[lucide--shuffle] w-full text-xs text-primary-background" />
+            </Button>
+          </template>
+          <div class="p-4 text-sm">Control popover content</div>
+        </Popover>
+      </ScrubableNumberInput>
+    `
+  })
+}

src/components/common/SearchBox.stories.ts

@@ -1,95 +0,0 @@
-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

@@ -1,193 +0,0 @@
-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

@@ -1,139 +0,0 @@
-<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

@@ -1,90 +0,0 @@
-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

@@ -1,117 +0,0 @@
-<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

@@ -59,8 +59,6 @@ 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
 }>()
@@ -79,7 +77,6 @@ type SystemInfoKey = keyof SystemStats['system']
 type ColumnDef = {
   field: SystemInfoKey
   header: string
-  getValue?: () => string
   format?: (value: string) => string
   formatNumber?: (value: number) => string
 }
@@ -107,7 +104,6 @@ const cloudColumns: ColumnDef[] = [
   {
     field: 'comfyui_frontend_version',
     header: 'Frontend Version',
-    getValue: () => frontendCommit,
     format: formatCommitHash
   },
   { field: 'workflow_templates_version', header: 'Templates Version' }
@@ -123,9 +119,7 @@ function isOutdated(column: ColumnDef): boolean {
 }
 
 function getDisplayValue(column: ColumnDef) {
-  const value = column.getValue
-    ? column.getValue()
-    : systemInfo.value[column.field]
+  const value = systemInfo.value[column.field]
   if (column.formatNumber && typeof value === 'number') {
     return column.formatNumber(value)
   }

src/components/common/TreeExplorerV2.vue

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

src/components/common/TreeExplorerV2Node.vue

@@ -8,6 +8,7 @@
     <!-- Node -->
     <div
       v-if="item.value.type === 'node'"
+      v-bind="$attrs"
       :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
       :style="rowStyle"
       draggable="true"
@@ -48,6 +49,7 @@
     <!-- Folder -->
     <div
       v-else
+      v-bind="$attrs"
       :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
       :style="rowStyle"
       @click.stop="handleClick($event, handleToggle, handleSelect)"
@@ -98,8 +100,12 @@ import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { cn } from '@/utils/tailwindUtil'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const ROW_CLASS =
-  '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'
+  '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'
 
 const { item } = defineProps<{
   item: FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -14,10 +14,10 @@
     </template>
 
     <template #header>
-      <SearchBox
+      <SearchInput
         v-model="searchQuery"
         size="lg"
-        class="max-w-[384px]"
+        class="max-w-96 flex-1"
         autofocus
       />
     </template>
@@ -403,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 SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'

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

@@ -1,6 +1,6 @@
 <template>
   <div class="keybinding-panel flex flex-col gap-2">
-    <SearchBox
+    <SearchInput
       v-model="filters['global'].value"
       :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
     />
@@ -59,7 +59,15 @@
         :pt="{ bodyCell: 'p-1 min-h-8' }"
       >
         <template #body="slotProps">
-          <div class="truncate" :title="slotProps.data.id">
+          <div
+            class="flex items-center gap-1.5 truncate"
+            :title="slotProps.data.id"
+          >
+            <i
+              v-if="slotProps.data.keybinding?.combo.isBrowserReserved"
+              v-tooltip="$t('g.browserReservedKeybindingTooltip')"
+              class="icon-[lucide--triangle-alert] shrink-0 text-warning-background"
+            />
             {{ slotProps.data.label }}
           </div>
         </template>
@@ -93,44 +101,6 @@
       </Column>
     </DataTable>
 
-    <Dialog
-      v-model:visible="editDialogVisible"
-      class="min-w-96"
-      modal
-      :header="currentEditingCommand?.label"
-      @hide="cancelEdit"
-    >
-      <div>
-        <InputText
-          ref="keybindingInput"
-          class="mb-2 text-center"
-          :model-value="newBindingKeyCombo?.toString() ?? ''"
-          :placeholder="$t('g.pressKeysForNewBinding')"
-          autocomplete="off"
-          fluid
-          @keydown.stop.prevent="captureKeybinding"
-        />
-        <Message v-if="existingKeybindingOnCombo" severity="warn">
-          {{ $t('g.keybindingAlreadyExists') }}
-          <Tag
-            severity="secondary"
-            :value="existingKeybindingOnCombo.commandId"
-          />
-        </Message>
-      </div>
-      <template #footer>
-        <Button
-          :variant="existingKeybindingOnCombo ? 'destructive' : 'primary'"
-          autofocus
-          @click="saveKeybinding"
-        >
-          <i
-            :class="existingKeybindingOnCombo ? 'pi pi-pencil' : 'pi pi-check'"
-          />
-          {{ existingKeybindingOnCombo ? $t('g.overwrite') : $t('g.save') }}
-        </Button>
-      </template>
-    </Dialog>
     <Button
       v-tooltip="$t('g.resetAllKeybindingsTooltip')"
       class="mt-4 w-full"
@@ -147,18 +117,14 @@
 import { FilterMatchMode } from '@primevue/core/api'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Message from 'primevue/message'
-import Tag from 'primevue/tag'
 import { useToast } from 'primevue/usetoast'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { KeyComboImpl } from '@/platform/keybindings/keyCombo'
-import { KeybindingImpl } from '@/platform/keybindings/keybinding'
+import { useEditKeybindingDialog } from '@/composables/useEditKeybindingDialog'
+import type { KeybindingImpl } from '@/platform/keybindings/keybinding'
 import { useKeybindingService } from '@/platform/keybindings/keybindingService'
 import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -195,50 +161,16 @@ const commandsData = computed<ICommandData[]>(() => {
 })
 
 const selectedCommandData = ref<ICommandData | null>(null)
-const editDialogVisible = ref(false)
-const newBindingKeyCombo = ref<KeyComboImpl | null>(null)
-const currentEditingCommand = ref<ICommandData | null>(null)
-const keybindingInput = ref<InstanceType<typeof InputText> | null>(null)
-
-const existingKeybindingOnCombo = computed<KeybindingImpl | null>(() => {
-  if (!currentEditingCommand.value) {
-    return null
-  }
-
-  // If the new keybinding is the same as the current editing command, then don't show the error
-  if (
-    currentEditingCommand.value.keybinding?.combo?.equals(
-      newBindingKeyCombo.value
-    )
-  ) {
-    return null
-  }
-
-  if (!newBindingKeyCombo.value) {
-    return null
-  }
-
-  return keybindingStore.getKeybinding(newBindingKeyCombo.value)
-})
+const editKeybindingDialog = useEditKeybindingDialog()
 
 function editKeybinding(commandData: ICommandData) {
-  currentEditingCommand.value = commandData
-  newBindingKeyCombo.value = commandData.keybinding
-    ? commandData.keybinding.combo
-    : null
-  editDialogVisible.value = true
+  editKeybindingDialog.show({
+    commandId: commandData.id,
+    commandLabel: commandData.label,
+    currentCombo: commandData.keybinding?.combo ?? null
+  })
 }
 
-watchEffect(() => {
-  if (editDialogVisible.value) {
-    // nextTick doesn't work here, so we use a timeout instead
-    setTimeout(() => {
-      // @ts-expect-error - $el is an internal property of the InputText component
-      keybindingInput.value?.$el?.focus()
-    }, 300)
-  }
-})
-
 async function removeKeybinding(commandData: ICommandData) {
   if (commandData.keybinding) {
     keybindingStore.unsetKeybinding(commandData.keybinding)
@@ -246,40 +178,6 @@ async function removeKeybinding(commandData: ICommandData) {
   }
 }
 
-async function captureKeybinding(event: KeyboardEvent) {
-  // Allow the use of keyboard shortcuts when adding keyboard shortcuts
-  if (!event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
-    switch (event.key) {
-      case 'Escape':
-        cancelEdit()
-        return
-      case 'Enter':
-        await saveKeybinding()
-        return
-    }
-  }
-  const keyCombo = KeyComboImpl.fromEvent(event)
-  newBindingKeyCombo.value = keyCombo
-}
-
-function cancelEdit() {
-  editDialogVisible.value = false
-  currentEditingCommand.value = null
-  newBindingKeyCombo.value = null
-}
-
-async function saveKeybinding() {
-  const commandId = currentEditingCommand.value?.id
-  const combo = newBindingKeyCombo.value
-  cancelEdit()
-  if (!combo || commandId == undefined) return
-
-  const updated = keybindingStore.updateKeybindingOnCommand(
-    new KeybindingImpl({ commandId, combo })
-  )
-  if (updated) await keybindingService.persistUserKeybindings()
-}
-
 async function resetKeybinding(commandData: ICommandData) {
   if (keybindingStore.resetKeybindingForCommand(commandData.id)) {
     await keybindingService.persistUserKeybindings()

src/components/dialog/content/setting/keybinding/EditKeybindingContent.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex w-96 flex-col border-t border-border-default px-4">
+    <p class="mb-4 text-sm text-muted-foreground">
+      {{ $t('g.setAKeybindingForTheFollowing') }}
+    </p>
+    <div class="mb-4 text-sm text-base-foreground">
+      {{ commandLabel }}
+    </div>
+
+    <input
+      class="text-foreground mb-4 w-full rounded-sm border border-border-default bg-secondary-background px-3 py-2 text-center shadow-none focus:outline-none"
+      :value="dialogState.newCombo?.toString() ?? ''"
+      :placeholder="$t('g.enterYourKeybind')"
+      :aria-label="$t('g.enterYourKeybind')"
+      autocomplete="off"
+      autofocus
+      @keydown.stop.prevent="captureKeybinding"
+    />
+    <div class="min-h-12">
+      <p
+        v-if="dialogState.newCombo?.isBrowserReserved"
+        class="m-0 text-sm text-destructive-background"
+      >
+        {{ $t('g.browserReservedKeybinding') }}
+      </p>
+      <p
+        v-else-if="existingKeybindingOnCombo"
+        class="m-0 text-sm text-destructive-background"
+      >
+        {{ $t('g.keybindingAlreadyExists') }}
+        {{ existingKeybindingOnCombo.commandId }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { KeybindingImpl } from '@/platform/keybindings/keybinding'
+import { KeyComboImpl } from '@/platform/keybindings/keyCombo'
+
+import type { EditKeybindingDialogState } from '@/composables/useEditKeybindingDialog'
+
+const { dialogState, onUpdateCombo, existingKeybindingOnCombo } = defineProps<{
+  dialogState: EditKeybindingDialogState
+  commandLabel: string
+  onUpdateCombo: (combo: KeyComboImpl) => void
+  existingKeybindingOnCombo: KeybindingImpl | null
+}>()
+
+function captureKeybinding(event: KeyboardEvent) {
+  if (!event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+    if (event.key === 'Escape') return
+  }
+  onUpdateCombo(KeyComboImpl.fromEvent(event))
+}
+</script>

src/components/dialog/content/setting/keybinding/EditKeybindingFooter.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="flex w-full justify-end gap-2 px-4 py-2">
+    <Button
+      variant="textonly"
+      size="md"
+      class="text-muted-foreground"
+      @click="handleCancel"
+    >
+      {{ $t('g.cancel') }}
+    </Button>
+    <Button
+      :variant="
+        existingKeybindingOnCombo
+          ? 'destructive'
+          : dialogState.newCombo?.isBrowserReserved
+            ? 'secondary'
+            : 'primary'
+      "
+      size="md"
+      :disabled="!dialogState.newCombo"
+      class="px-4 py-2"
+      @click="handleSave"
+    >
+      {{
+        existingKeybindingOnCombo
+          ? $t('g.overwrite')
+          : dialogState.newCombo?.isBrowserReserved
+            ? $t('g.saveAnyway')
+            : $t('g.save')
+      }}
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Reactive } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+import { KeybindingImpl } from '@/platform/keybindings/keybinding'
+import { useKeybindingService } from '@/platform/keybindings/keybindingService'
+import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+import type { EditKeybindingDialogState } from '@/composables/useEditKeybindingDialog'
+import { DIALOG_KEY } from '@/composables/useEditKeybindingDialog'
+
+const { dialogState, existingKeybindingOnCombo } = defineProps<{
+  dialogState: Reactive<EditKeybindingDialogState>
+  existingKeybindingOnCombo: KeybindingImpl | null
+}>()
+
+const keybindingStore = useKeybindingStore()
+const keybindingService = useKeybindingService()
+const dialogStore = useDialogStore()
+
+function handleCancel() {
+  dialogStore.closeDialog({ key: DIALOG_KEY })
+}
+
+async function handleSave() {
+  const combo = dialogState.newCombo
+  const commandId = dialogState.commandId
+  if (!combo || !commandId) return
+
+  dialogStore.closeDialog({ key: DIALOG_KEY })
+
+  const updated = keybindingStore.updateKeybindingOnCommand(
+    new KeybindingImpl({ commandId, combo })
+  )
+  if (updated) await keybindingService.persistUserKeybindings()
+}
+</script>

src/components/dialog/content/setting/keybinding/EditKeybindingHeader.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex w-full items-center gap-2 p-4">
+    <p class="m-0 font-semibold">{{ $t('g.modifyKeybinding') }}</p>
+  </div>
+</template>

src/components/graph/GraphCanvas.vue

@@ -364,24 +364,10 @@ watch(
   }
 )
 
-/**
- * Propagates execution progress from the store to LiteGraph node objects
- * and triggers a canvas redraw.
- *
- * No `deep: true` needed — `nodeLocationProgressStates` is a computed that
- * returns a new `Record` object on every progress event (the underlying
- * `nodeProgressStates` ref is replaced wholesale by the WebSocket handler).
- *
- * `currentGraph` triggers this watcher on subgraph navigation so stale
- * progress bars are cleared when returning to the root graph.
- */
+// Update the progress of executing nodes
 watch(
   () =>
-    [
-      executionStore.nodeLocationProgressStates,
-      canvasStore.canvas,
-      canvasStore.currentGraph
-    ] as const,
+    [executionStore.nodeLocationProgressStates, canvasStore.canvas] as const,
   ([nodeLocationProgressStates, canvas]) => {
     if (!canvas?.graph) return
     for (const node of canvas.graph.nodes) {
@@ -493,50 +479,53 @@ useEventListener(
 onMounted(async () => {
   comfyApp.vueAppReady = true
   workspaceStore.spinner = true
-  // ChangeTracker needs to be initialized before setup, as it will overwrite
-  // some listeners of litegraph canvas.
-  ChangeTracker.init()
+  try {
+    // ChangeTracker needs to be initialized before setup, as it will overwrite
+    // some listeners of litegraph canvas.
+    ChangeTracker.init()
 
-  await until(() => isSettingsReady.value || !!settingsError.value).toBe(true)
+    await until(() => isSettingsReady.value || !!settingsError.value).toBe(true)
 
-  if (settingsError.value) {
-    if (settingsError.value instanceof UnauthorizedError) {
-      localStorage.removeItem('Comfy.userId')
-      localStorage.removeItem('Comfy.userName')
-      window.location.reload()
-      return
+    if (settingsError.value) {
+      if (settingsError.value instanceof UnauthorizedError) {
+        localStorage.removeItem('Comfy.userId')
+        localStorage.removeItem('Comfy.userName')
+        window.location.reload()
+        return
+      }
+      throw settingsError.value
     }
-    throw settingsError.value
+
+    // Register core settings immediately after settings are ready
+    CORE_SETTINGS.forEach(settingStore.addSetting)
+
+    await Promise.all([
+      until(() => isI18nReady.value || !!i18nError.value).toBe(true),
+      useNewUserService().initializeIfNewUser()
+    ])
+    if (i18nError.value) {
+      console.warn(
+        '[GraphCanvas] Failed to load custom nodes i18n:',
+        i18nError.value
+      )
+    }
+
+    // @ts-expect-error fixme ts strict error
+    await comfyApp.setup(canvasRef.value)
+    canvasStore.canvas = comfyApp.canvas
+    canvasStore.canvas.render_canvas_border = false
+    useSearchBoxStore().setPopoverRef(nodeSearchboxPopoverRef.value)
+
+    window.app = comfyApp
+    window.graph = comfyApp.graph
+
+    comfyAppReady.value = true
+
+    vueNodeLifecycle.setupEmptyGraphListener()
+  } finally {
+    workspaceStore.spinner = false
   }
 
-  // Register core settings immediately after settings are ready
-  CORE_SETTINGS.forEach(settingStore.addSetting)
-
-  await Promise.all([
-    until(() => isI18nReady.value || !!i18nError.value).toBe(true),
-    useNewUserService().initializeIfNewUser()
-  ])
-  if (i18nError.value) {
-    console.warn(
-      '[GraphCanvas] Failed to load custom nodes i18n:',
-      i18nError.value
-    )
-  }
-
-  // @ts-expect-error fixme ts strict error
-  await comfyApp.setup(canvasRef.value)
-  canvasStore.canvas = comfyApp.canvas
-  canvasStore.canvas.render_canvas_border = false
-  workspaceStore.spinner = false
-  useSearchBoxStore().setPopoverRef(nodeSearchboxPopoverRef.value)
-
-  window.app = comfyApp
-  window.graph = comfyApp.graph
-
-  comfyAppReady.value = true
-
-  vueNodeLifecycle.setupEmptyGraphListener()
-
   comfyApp.canvas.onSelectionChange = useChainCallback(
     comfyApp.canvas.onSelectionChange,
     () => canvasStore.updateSelectedItems()

src/components/input/MultiSelect.stories.ts

@@ -1,73 +1,33 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'
 
 import MultiSelect from './MultiSelect.vue'
 import type { SelectOption } from './types'
 
-// Combine our component props with PrimeVue MultiSelect props
-// Since we use v-bind="$attrs", all PrimeVue props are available
-interface ExtendedProps extends Partial<MultiSelectProps> {
-  // Our custom props
-  label?: string
-  showSearchBox?: boolean
-  showSelectedCount?: boolean
-  showClearButton?: boolean
-  searchPlaceholder?: string
-  listMaxHeight?: string
-  popoverMinWidth?: string
-  popoverMaxWidth?: string
-  // Override modelValue type to match our Option type
-  modelValue?: SelectOption[]
-}
-
-const meta: Meta<ExtendedProps> = {
-  title: 'Components/Input/MultiSelect',
+const meta: Meta<typeof MultiSelect> = {
+  title: 'Components/Select/MultiSelect',
   component: MultiSelect,
   tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    () => ({
+      template: '<div class="pt-4"><story /></div>'
+    })
+  ],
   argTypes: {
-    label: {
-      control: 'text'
+    label: { control: 'text' },
+    size: {
+      control: { type: 'select' },
+      options: ['lg', 'md']
     },
-    options: {
-      control: 'object'
-    },
-    showSearchBox: {
-      control: 'boolean',
-      description: 'Toggle searchBar visibility'
-    },
-    showSelectedCount: {
-      control: 'boolean',
-      description: 'Toggle selected count visibility'
-    },
-    showClearButton: {
-      control: 'boolean',
-      description: 'Toggle clear button visibility'
-    },
-    searchPlaceholder: {
-      control: 'text'
-    },
-    listMaxHeight: {
-      control: 'text',
-      description: 'Maximum height of the dropdown list'
-    },
-    popoverMinWidth: {
-      control: 'text',
-      description: 'Minimum width of the popover'
-    },
-    popoverMaxWidth: {
-      control: 'text',
-      description: 'Maximum width of the popover'
-    }
+    showSearchBox: { control: 'boolean' },
+    showSelectedCount: { control: 'boolean' },
+    showClearButton: { control: 'boolean' },
+    searchPlaceholder: { control: 'text' }
   },
   args: {
-    label: 'Select',
-    options: [
-      { name: 'Vue', value: 'vue' },
-      { name: 'React', value: 'react' },
-      { name: 'Angular', value: 'angular' },
-      { name: 'Svelte', value: 'svelte' }
-    ],
+    label: 'Category',
+    size: 'lg',
     showSearchBox: false,
     showSelectedCount: false,
     showClearButton: false,
@@ -78,352 +38,125 @@ const meta: Meta<ExtendedProps> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const sampleOptions: SelectOption[] = [
+  { name: 'Vue', value: 'vue' },
+  { name: 'React', value: 'react' },
+  { name: 'Angular', value: 'angular' },
+  { name: 'Svelte', value: 'svelte' }
+]
+
 export const Default: Story = {
   render: (args) => ({
     components: { MultiSelect },
     setup() {
-      const selected = ref([])
-      const options = args.options || [
-        { name: 'Vue', value: 'vue' },
-        { name: 'React', value: 'react' },
-        { name: 'Angular', value: 'angular' },
-        { name: 'Svelte', value: 'svelte' }
-      ]
-      return { selected, options, args }
+      const selected = ref<SelectOption[]>([])
+      return { selected, sampleOptions, args }
     },
-    template: `
-      <div>
-        <MultiSelect 
-          v-model="selected" 
-          :options="options"
-          :label="args.label"
-          :showSearchBox="args.showSearchBox"
-          :showSelectedCount="args.showSelectedCount"
-          :showClearButton="args.showClearButton"
-          :searchPlaceholder="args.searchPlaceholder"
-        />
-        <div class="mt-4 p-3 bg-base-background rounded">
-          <p class="text-sm">Selected: {{ selected.length > 0 ? selected.map(s => s.name).join(', ') : 'None' }}</p>
-        </div>
-      </div>
-    `
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" :label="args.label" :size="args.size" :show-search-box="args.showSearchBox" :show-selected-count="args.showSelectedCount" :show-clear-button="args.showClearButton" />'
   })
 }
 
-export const WithPreselectedValues: Story = {
-  render: (args) => ({
+export const MediumSize: Story = {
+  render: () => ({
     components: { MultiSelect },
     setup() {
-      const options = args.options || [
-        { name: 'JavaScript', value: 'js' },
-        { name: 'TypeScript', value: 'ts' },
-        { name: 'Python', value: 'python' },
-        { name: 'Go', value: 'go' },
-        { name: 'Rust', value: 'rust' }
-      ]
-      const selected = ref([options[0], options[1]])
-      return { selected, options, args }
+      const selected = ref<SelectOption[]>([sampleOptions[0]])
+      return { selected, sampleOptions }
     },
-    template: `
-      <div>
-        <MultiSelect 
-          v-model="selected" 
-          :options="options"
-          :label="args.label"
-          :showSearchBox="args.showSearchBox"
-          :showSelectedCount="args.showSelectedCount"
-          :showClearButton="args.showClearButton"
-          :searchPlaceholder="args.searchPlaceholder"
-        />
-        <div class="mt-4 p-3 bg-base-background rounded">
-          <p class="text-sm">Selected: {{ selected.map(s => s.name).join(', ') }}</p>
-        </div>
-      </div>
-    `
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" size="md" />'
   }),
-  args: {
-    label: 'Select Languages',
-    options: [
-      { name: 'JavaScript', value: 'js' },
-      { name: 'TypeScript', value: 'ts' },
-      { name: 'Python', value: 'python' },
-      { name: 'Go', value: 'go' },
-      { name: 'Rust', value: 'rust' }
-    ],
-    showSearchBox: false,
-    showSelectedCount: false,
-    showClearButton: false,
-    searchPlaceholder: 'Search...'
-  }
+  parameters: { controls: { disable: true } }
 }
 
-export const MultipleSelectors: Story = {
+export const WithPreselectedValues: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected = ref<SelectOption[]>([sampleOptions[0], sampleOptions[1]])
+      return { selected, sampleOptions }
+    },
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" />'
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected = ref<SelectOption[]>([sampleOptions[0]])
+      return { selected, sampleOptions }
+    },
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" disabled />'
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const WithSearchBox: Story = {
+  args: { showSearchBox: true },
   render: (args) => ({
     components: { MultiSelect },
     setup() {
-      const frameworkOptions = ref([
-        { name: 'Vue', value: 'vue' },
-        { name: 'React', value: 'react' },
-        { name: 'Angular', value: 'angular' },
-        { name: 'Svelte', value: 'svelte' }
-      ])
+      const selected = ref<SelectOption[]>([])
+      return { selected, sampleOptions, args }
+    },
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" :show-search-box="args.showSearchBox" />'
+  })
+}
 
-      const projectOptions = ref([
-        { name: 'Project A', value: 'proj-a' },
-        { name: 'Project B', value: 'proj-b' },
-        { name: 'Project C', value: 'proj-c' },
-        { name: 'Project D', value: 'proj-d' }
-      ])
+export const AllHeaderFeatures: Story = {
+  args: {
+    showSearchBox: true,
+    showSelectedCount: true,
+    showClearButton: true
+  },
+  render: (args) => ({
+    components: { MultiSelect },
+    setup() {
+      const selected = ref<SelectOption[]>([])
+      return { selected, sampleOptions, args }
+    },
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" :show-search-box="args.showSearchBox" :show-selected-count="args.showSelectedCount" :show-clear-button="args.showClearButton" />'
+  })
+}
 
-      const tagOptions = ref([
-        { name: 'Frontend', value: 'frontend' },
-        { name: 'Backend', value: 'backend' },
-        { name: 'Database', value: 'database' },
-        { name: 'DevOps', value: 'devops' },
-        { name: 'Testing', value: 'testing' }
-      ])
-
-      const selectedFrameworks = ref([])
-      const selectedProjects = ref([])
-      const selectedTags = ref([])
-
-      return {
-        frameworkOptions,
-        projectOptions,
-        tagOptions,
-        selectedFrameworks,
-        selectedProjects,
-        selectedTags,
-        args
-      }
+export const AllStates: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const a = ref<SelectOption[]>([])
+      const b = ref<SelectOption[]>([sampleOptions[0]])
+      const c = ref<SelectOption[]>([sampleOptions[0]])
+      return { sampleOptions, a, b, c }
     },
     template: `
-      <div class="space-y-4">
-        <div class="flex gap-2">
-          <MultiSelect 
-            v-model="selectedFrameworks" 
-            :options="frameworkOptions"
-            label="Select Frameworks"
-            :showSearchBox="args.showSearchBox"
-            :showSelectedCount="args.showSelectedCount"
-            :showClearButton="args.showClearButton"
-            :searchPlaceholder="args.searchPlaceholder"
-          />
-          <MultiSelect 
-            v-model="selectedProjects" 
-            :options="projectOptions"
-            label="Select Projects"
-            :showSearchBox="args.showSearchBox"
-            :showSelectedCount="args.showSelectedCount"
-            :showClearButton="args.showClearButton"
-            :searchPlaceholder="args.searchPlaceholder"
-          />
-          <MultiSelect 
-            v-model="selectedTags" 
-            :options="tagOptions"
-            label="Select Tags"
-            :showSearchBox="args.showSearchBox"
-            :showSelectedCount="args.showSelectedCount"
-            :showClearButton="args.showClearButton"
-            :searchPlaceholder="args.searchPlaceholder"
-          />
+      <div class="flex flex-col gap-6">
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Large (Interface)</p>
+          <div class="flex flex-col gap-3">
+            <MultiSelect v-model="a" :options="sampleOptions" label="Default" />
+            <MultiSelect v-model="b" :options="sampleOptions" label="With Selection" />
+            <MultiSelect v-model="c" :options="sampleOptions" label="Disabled" disabled />
+          </div>
         </div>
-        
-        <div class="p-4 bg-base-background rounded">
-          <h4 class="font-medium mt-0">Current Selection:</h4>
-          <div class="flex flex-col text-sm">
-            <p>Frameworks: {{ selectedFrameworks.length > 0 ? selectedFrameworks.map(s => s.name).join(', ') : 'None' }}</p>
-            <p>Projects: {{ selectedProjects.length > 0 ? selectedProjects.map(s => s.name).join(', ') : 'None' }}</p>
-            <p>Tags: {{ selectedTags.length > 0 ? selectedTags.map(s => s.name).join(', ') : 'None' }}</p>
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Medium (Node)</p>
+          <div class="flex flex-col gap-3">
+            <MultiSelect v-model="a" :options="sampleOptions" label="Default" size="md" />
+            <MultiSelect v-model="b" :options="sampleOptions" label="With Selection" size="md" />
+            <MultiSelect v-model="c" :options="sampleOptions" label="Disabled" size="md" disabled />
           </div>
         </div>
       </div>
     `
   }),
-  args: {
-    showSearchBox: false,
-    showSelectedCount: false,
-    showClearButton: false,
-    searchPlaceholder: 'Search...'
-  }
-}
-
-export const WithSearchBox: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    showSearchBox: true
-  }
-}
-
-export const WithSelectedCount: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    showSelectedCount: true
-  }
-}
-
-export const WithClearButton: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    showClearButton: true
-  }
-}
-
-export const AllHeaderFeatures: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    showSearchBox: true,
-    showSelectedCount: true,
-    showClearButton: true
-  }
-}
-
-export const CustomSearchPlaceholder: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    showSearchBox: true,
-    searchPlaceholder: 'Filter packages...'
-  }
-}
-
-export const CustomMaxHeight: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected1 = ref([])
-      const selected2 = ref([])
-      const selected3 = ref([])
-      const manyOptions = Array.from({ length: 20 }, (_, i) => ({
-        name: `Option ${i + 1}`,
-        value: `option${i + 1}`
-      }))
-      return { selected1, selected2, selected3, manyOptions }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Small Height (10rem)</h3>
-          <MultiSelect 
-            v-model="selected1" 
-            :options="manyOptions" 
-            label="Small Dropdown" 
-            list-max-height="10rem"
-            show-selected-count 
-          />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Default Height (28rem)</h3>
-          <MultiSelect 
-            v-model="selected2" 
-            :options="manyOptions" 
-            label="Default Dropdown"
-            list-max-height="28rem"
-            show-selected-count 
-          />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Large Height (32rem)</h3>
-          <MultiSelect 
-            v-model="selected3" 
-            :options="manyOptions" 
-            label="Large Dropdown" 
-            list-max-height="32rem"
-            show-selected-count 
-          />
-        </div>
-      </div>
-    `
-  }),
   parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
-  }
-}
-
-export const CustomMinWidth: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected1 = ref([])
-      const selected2 = ref([])
-      const selected3 = ref([])
-      const options = [
-        { name: 'A', value: 'a' },
-        { name: 'B', value: 'b' },
-        { name: 'Very Long Option Name Here', value: 'long' }
-      ]
-      return { selected1, selected2, selected3, options }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
-          <MultiSelect v-model="selected1" :options="options" label="Auto" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min Width 18rem</h3>
-          <MultiSelect v-model="selected2" :options="options" label="Min 18rem" popover-min-width="18rem" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min Width 28rem</h3>
-          <MultiSelect v-model="selected3" :options="options" label="Min 28rem" popover-min-width="28rem" />
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
-  }
-}
-
-export const CustomMaxWidth: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected1 = ref([])
-      const selected2 = ref([])
-      const selected3 = ref([])
-      const longOptions = [
-        { name: 'Short', value: 'short' },
-        {
-          name: 'This is a very long option name that would normally expand the dropdown',
-          value: 'long1'
-        },
-        {
-          name: 'Another extremely long option that demonstrates max-width constraint',
-          value: 'long2'
-        }
-      ]
-      return { selected1, selected2, selected3, longOptions }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
-          <MultiSelect v-model="selected1" :options="longOptions" label="Auto" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Max Width 18rem</h3>
-          <MultiSelect v-model="selected2" :options="longOptions" label="Max 18rem" popover-max-width="18rem" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min 12rem Max 22rem</h3>
-          <MultiSelect v-model="selected3" :options="longOptions" label="Min & Max" popover-min-width="12rem" popover-max-width="22rem" />
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
+    controls: { disable: true }
   }
 }

src/components/input/MultiSelect.vue

@@ -16,20 +16,23 @@
     :pt="{
       root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
-          'relative inline-flex h-10 cursor-pointer select-none',
+          'relative inline-flex cursor-pointer select-none',
+          size === 'md' ? 'h-8' : 'h-10',
           'rounded-lg bg-secondary-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
+          'hover:bg-secondary-background-hover',
           'border-[2.5px] border-solid',
-          selectedCount > 0
-            ? 'border-node-component-border'
-            : 'border-transparent',
-          'focus-within:border-node-component-border',
-          { 'cursor-default opacity-60': props.disabled }
+          selectedCount > 0 ? 'border-base-foreground' : 'border-transparent',
+          'focus-within:border-base-foreground',
+          props.disabled &&
+            'cursor-default opacity-30 hover:bg-secondary-background'
         )
       }),
       labelContainer: {
-        class:
-          'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 '
+        class: cn(
+          'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
+          size === 'md' ? 'pl-3' : 'pl-4'
+        )
       },
       label: {
         class: 'p-0'
@@ -93,13 +96,12 @@
       #header
     >
       <div class="flex flex-col px-2 pt-2 pb-0">
-        <SearchBox
+        <SearchInput
           v-if="showSearchBox"
           v-model="searchQuery"
           :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
-          :show-order="true"
-          :show-border="true"
-          :place-holder="searchPlaceholder"
+          :placeholder="searchPlaceholder"
+          size="sm"
         />
         <div
           v-if="showSelectedCount || showClearButton"
@@ -130,12 +132,12 @@
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span class="text-sm">
+      <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
         {{ label }}
       </span>
       <span
         v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
       >
         {{ selectedCount }}
       </span>
@@ -182,7 +184,7 @@ import MultiSelect from 'primevue/multiselect'
 import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
@@ -198,6 +200,8 @@ defineOptions({
 interface Props {
   /** Input label shown on the trigger button */
   label?: string
+  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
+  size?: 'lg' | 'md'
   /** Show search box in the panel header */
   showSearchBox?: boolean
   /** Show selected count text in the panel header */
@@ -217,6 +221,7 @@ interface Props {
 }
 const {
   label,
+  size = 'lg',
   showSearchBox = false,
   showSelectedCount = false,
   showClearButton = false,

src/components/input/SelectDropdown.stories.ts

@@ -0,0 +1,219 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import MultiSelect from './MultiSelect.vue'
+import SingleSelect from './SingleSelect.vue'
+import type { SelectOption } from './types'
+
+const meta: Meta = {
+  title: 'Components/Select/SelectDropdown',
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    () => ({
+      template: '<div class="pt-4"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const modelOptions: SelectOption[] = [
+  { name: 'ACE-Step', value: 'ace-step' },
+  { name: 'Anima', value: 'anima' },
+  { name: 'BRIA', value: 'bria' },
+  { name: 'ByteDance', value: 'bytedance' },
+  { name: 'Capybara', value: 'capybara' },
+  { name: 'Chatter Box', value: 'chatter-box' },
+  { name: 'Chroma', value: 'chroma' },
+  { name: 'ChronoEdit', value: 'chronoedit' },
+  { name: 'DWPose', value: 'dwpose' },
+  { name: 'Depth Anything v2', value: 'depth-anything-v2' },
+  { name: 'ElevenLabs', value: 'elevenlabs' },
+  { name: 'Flux', value: 'flux' },
+  { name: 'HunyuanVideo', value: 'hunyuan-video' },
+  { name: 'Stable Diffusion', value: 'stable-diffusion' },
+  { name: 'SDXL', value: 'sdxl' }
+]
+
+const useCaseOptions: SelectOption[] = [
+  { name: 'Text to Image', value: 'text-to-image' },
+  { name: 'Image to Image', value: 'image-to-image' },
+  { name: 'Inpainting', value: 'inpainting' },
+  { name: 'Upscaling', value: 'upscaling' },
+  { name: 'Video Generation', value: 'video-generation' },
+  { name: 'Audio Generation', value: 'audio-generation' },
+  { name: '3D Generation', value: '3d-generation' }
+]
+
+const sortOptions: SelectOption[] = [
+  { name: 'Default', value: 'default' },
+  { name: 'Recommended', value: 'recommended' },
+  { name: 'Popular', value: 'popular' },
+  { name: 'Newest', value: 'newest' },
+  { name: 'VRAM Usage (Low to High)', value: 'vram-low-to-high' },
+  { name: 'Model Size (Low to High)', value: 'model-size-low-to-high' },
+  { name: 'Alphabetical (A-Z)', value: 'alphabetical' }
+]
+
+export const ModelFilter: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected = ref<SelectOption[]>([
+        modelOptions[1],
+        modelOptions[2],
+        modelOptions[3]
+      ])
+      return { selected, modelOptions }
+    },
+    template: `
+      <MultiSelect
+        v-model="selected"
+        :options="modelOptions"
+        :label="selected.length === 0 ? 'Models' : selected.length === 1 ? selected[0].name : selected.length + ' Models'"
+        show-search-box
+        show-selected-count
+        show-clear-button
+        class="w-[250px]"
+      >
+        <template #icon>
+          <i class="icon-[lucide--cpu]" />
+        </template>
+      </MultiSelect>
+    `
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const UseCaseFilter: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected = ref<SelectOption[]>([])
+      return { selected, useCaseOptions }
+    },
+    template: `
+      <MultiSelect
+        v-model="selected"
+        :options="useCaseOptions"
+        :label="selected.length === 0 ? 'Use Case' : selected.length === 1 ? selected[0].name : selected.length + ' Use Cases'"
+        show-search-box
+        show-selected-count
+        show-clear-button
+      >
+        <template #icon>
+          <i class="icon-[lucide--target]" />
+        </template>
+      </MultiSelect>
+    `
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const SortDropdown: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | undefined>('default')
+      return { selected, sortOptions }
+    },
+    template: `
+      <SingleSelect
+        v-model="selected"
+        :options="sortOptions"
+        label="Sort by"
+        class="w-62.5"
+      >
+        <template #icon>
+          <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
+        </template>
+      </SingleSelect>
+    `
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const TemplateFilterBar: Story = {
+  render: () => ({
+    components: { MultiSelect, SingleSelect },
+    setup() {
+      const selectedModels = ref<SelectOption[]>([
+        modelOptions[1],
+        modelOptions[2],
+        modelOptions[3]
+      ])
+      const selectedUseCases = ref<SelectOption[]>([])
+      const sortBy = ref<string | undefined>('default')
+
+      const modelLabel = () => {
+        if (selectedModels.value.length === 0) return 'Models'
+        if (selectedModels.value.length === 1)
+          return selectedModels.value[0].name
+        return selectedModels.value.length + ' Models'
+      }
+      const useCaseLabel = () => {
+        if (selectedUseCases.value.length === 0) return 'Use Case'
+        if (selectedUseCases.value.length === 1)
+          return selectedUseCases.value[0].name
+        return selectedUseCases.value.length + ' Use Cases'
+      }
+
+      return {
+        selectedModels,
+        selectedUseCases,
+        sortBy,
+        modelOptions,
+        useCaseOptions,
+        sortOptions,
+        modelLabel,
+        useCaseLabel
+      }
+    },
+    template: `
+      <div class="flex flex-wrap items-center justify-between gap-2" style="min-width: 700px;">
+        <div class="flex flex-wrap gap-2">
+          <MultiSelect
+            v-model="selectedModels"
+            :options="modelOptions"
+            :label="modelLabel()"
+            show-search-box
+            show-selected-count
+            show-clear-button
+            class="w-[250px]"
+          >
+            <template #icon>
+              <i class="icon-[lucide--cpu]" />
+            </template>
+          </MultiSelect>
+
+          <MultiSelect
+            v-model="selectedUseCases"
+            :options="useCaseOptions"
+            :label="useCaseLabel()"
+            show-search-box
+            show-selected-count
+            show-clear-button
+          >
+            <template #icon>
+              <i class="icon-[lucide--target]" />
+            </template>
+          </MultiSelect>
+        </div>
+
+        <SingleSelect
+          v-model="sortBy"
+          :options="sortOptions"
+          label="Sort by"
+          class="w-62.5"
+        >
+          <template #icon>
+            <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
+          </template>
+        </SingleSelect>
+      </div>
+    `
+  }),
+  parameters: { controls: { disable: true } }
+}

src/components/input/SingleSelect.stories.ts

@@ -3,29 +3,31 @@ import { ref } from 'vue'
 
 import SingleSelect from './SingleSelect.vue'
 
-// SingleSelect already includes options prop, so no need to extend
 const meta: Meta<typeof SingleSelect> = {
-  title: 'Components/Input/SingleSelect',
+  title: 'Components/Select/SingleSelect',
   component: SingleSelect,
   tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    () => ({
+      template: '<div class="pt-4"><story /></div>'
+    })
+  ],
   argTypes: {
     label: { control: 'text' },
     options: { control: 'object' },
-    listMaxHeight: {
-      control: 'text',
-      description: 'Maximum height of the dropdown list'
+    size: {
+      control: { type: 'select' },
+      options: ['lg', 'md']
     },
-    popoverMinWidth: {
-      control: 'text',
-      description: 'Minimum width of the popover'
-    },
-    popoverMaxWidth: {
-      control: 'text',
-      description: 'Maximum width of the popover'
-    }
+    invalid: { control: 'boolean' },
+    loading: { control: 'boolean' }
   },
   args: {
-    label: 'Sorting Type',
+    label: 'Category',
+    size: 'lg',
+    invalid: false,
+    loading: false,
     options: [
       { name: 'Popular', value: 'popular' },
       { name: 'Newest', value: 'newest' },
@@ -37,7 +39,7 @@ const meta: Meta<typeof SingleSelect> = {
 }
 
 export default meta
-export type Story = StoryObj<typeof meta>
+type Story = StoryObj<typeof meta>
 
 const sampleOptions = [
   { name: 'Popular', value: 'popular' },
@@ -52,205 +54,118 @@ export const Default: Story = {
     components: { SingleSelect },
     setup() {
       const selected = ref<string | null>(null)
-      const options = args.options || sampleOptions
-      return { selected, options, args }
+      return { selected, args }
     },
-    template: `
-      <div>
-        <SingleSelect v-model="selected" :options="options" :label="args.label" />
-        <div class="mt-4 p-3 bg-base-background rounded">
-          <p class="text-sm">Selected: {{ selected ?? 'None' }}</p>
-        </div>
-      </div>
-    `
+    template:
+      '<SingleSelect v-model="selected" :options="args.options" :label="args.label" :size="args.size" :invalid="args.invalid" :loading="args.loading" />'
   })
 }
 
+export const MediumSize: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | null>('popular')
+      return { selected, sampleOptions }
+    },
+    template:
+      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" size="md" />'
+  }),
+  parameters: { controls: { disable: true } }
+}
+
 export const WithIcon: Story = {
   render: () => ({
     components: { SingleSelect },
     setup() {
       const selected = ref<string | null>('popular')
-      const options = sampleOptions
-      return { selected, options }
+      return { selected, sampleOptions }
     },
     template: `
-      <div>
-        <SingleSelect v-model="selected" :options="options" label="Sorting Type">
-          <template #icon>
-            <i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
-          </template>
-        </SingleSelect>
-        <div class="mt-4 p-3 bg-base-background rounded">
-          <p class="text-sm">Selected: {{ selected }}</p>
-        </div>
-      </div>
+      <SingleSelect v-model="selected" :options="sampleOptions" label="Sorting Type">
+        <template #icon>
+          <i class="icon-[lucide--arrow-up-down] size-3.5" />
+        </template>
+      </SingleSelect>
     `
-  })
+  }),
+  parameters: { controls: { disable: true } }
 }
 
-export const Preselected: Story = {
+export const Disabled: Story = {
   render: () => ({
     components: { SingleSelect },
     setup() {
-      const selected = ref<string | null>('newest')
-      const options = sampleOptions
-      return { selected, options }
+      const selected = ref<string | null>('popular')
+      return { selected, sampleOptions }
     },
-    template: `
-      <SingleSelect v-model="selected" :options="options" label="Sorting Type" />
-    `
-  })
+    template:
+      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" disabled />'
+  }),
+  parameters: { controls: { disable: true } }
 }
 
-export const AllVariants: Story = {
+export const Invalid: Story = {
   render: () => ({
     components: { SingleSelect },
     setup() {
-      const options = sampleOptions
-      const a = ref<string | null>(null)
+      const selected = ref<string | null>('popular')
+      return { selected, sampleOptions }
+    },
+    template:
+      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" invalid />'
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const Loading: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | null>('popular')
+      return { selected, sampleOptions }
+    },
+    template:
+      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" loading />'
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const AllStates: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const a = ref<string | null>('popular')
       const b = ref<string | null>('popular')
-      const c = ref<string | null>('az')
-      return { options, a, b, c }
+      const c = ref<string | null>('popular')
+      const d = ref<string | null>('popular')
+      const e = ref<string | null>('popular')
+      return { sampleOptions, a, b, c, d, e }
     },
     template: `
-      <div class="flex flex-col gap-4">
-        <div class="flex items-center gap-3">
-          <SingleSelect v-model="a" :options="options" label="No Icon" />
+      <div class="flex flex-col gap-6">
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Large (Interface)</p>
+          <div class="flex flex-col gap-3">
+            <SingleSelect v-model="a" :options="sampleOptions" label="Default" />
+            <SingleSelect v-model="b" :options="sampleOptions" label="Disabled" disabled />
+            <SingleSelect v-model="c" :options="sampleOptions" label="Invalid" invalid />
+            <SingleSelect v-model="d" :options="sampleOptions" label="Loading" loading />
+          </div>
         </div>
-        <div class="flex items-center gap-3">
-          <SingleSelect v-model="b" :options="options" label="With Icon">
-            <template #icon>
-              <i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
-            </template>
-          </SingleSelect>
-        </div>
-        <div class="flex items-center gap-3">
-          <SingleSelect v-model="c" :options="options" label="Preselected (A→Z)" />
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Medium (Node)</p>
+          <div class="flex flex-col gap-3">
+            <SingleSelect v-model="a" :options="sampleOptions" label="Default" size="md" />
+            <SingleSelect v-model="b" :options="sampleOptions" label="Disabled" size="md" disabled />
+            <SingleSelect v-model="c" :options="sampleOptions" label="Invalid" size="md" invalid />
+            <SingleSelect v-model="e" :options="sampleOptions" label="Loading" size="md" loading />
+          </div>
         </div>
       </div>
     `
   }),
   parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
-  }
-}
-
-export const CustomMaxHeight: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected = ref<string | null>(null)
-      const manyOptions = Array.from({ length: 20 }, (_, i) => ({
-        name: `Option ${i + 1}`,
-        value: `option${i + 1}`
-      }))
-      return { selected, manyOptions }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Small Height (10rem)</h3>
-          <SingleSelect v-model="selected" :options="manyOptions" label="Small Dropdown" list-max-height="10rem" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Default Height (28rem)</h3>
-          <SingleSelect v-model="selected" :options="manyOptions" label="Default Dropdown" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Large Height (32rem)</h3>
-          <SingleSelect v-model="selected" :options="manyOptions" label="Large Dropdown" list-max-height="32rem" />
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
-  }
-}
-
-export const CustomMinWidth: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected1 = ref<string | null>(null)
-      const selected2 = ref<string | null>(null)
-      const selected3 = ref<string | null>(null)
-      const options = [
-        { name: 'A', value: 'a' },
-        { name: 'B', value: 'b' },
-        { name: 'Very Long Option Name Here', value: 'long' }
-      ]
-      return { selected1, selected2, selected3, options }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
-          <SingleSelect v-model="selected1" :options="options" label="Auto" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min Width 15rem</h3>
-          <SingleSelect v-model="selected2" :options="options" label="Min 15rem" popover-min-width="15rem" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min Width 25rem</h3>
-          <SingleSelect v-model="selected3" :options="options" label="Min 25rem" popover-min-width="25rem" />
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
-  }
-}
-
-export const CustomMaxWidth: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected1 = ref<string | null>(null)
-      const selected2 = ref<string | null>(null)
-      const selected3 = ref<string | null>(null)
-      const longOptions = [
-        { name: 'Short', value: 'short' },
-        {
-          name: 'This is a very long option name that would normally expand the dropdown',
-          value: 'long1'
-        },
-        {
-          name: 'Another extremely long option that demonstrates max-width constraint',
-          value: 'long2'
-        }
-      ]
-      return { selected1, selected2, selected3, longOptions }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
-          <SingleSelect v-model="selected1" :options="longOptions" label="Auto" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Max Width 15rem</h3>
-          <SingleSelect v-model="selected2" :options="longOptions" label="Max 15rem" popover-max-width="15rem" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min 10rem Max 20rem</h3>
-          <SingleSelect v-model="selected3" :options="longOptions" label="Min & Max" popover-min-width="10rem" popover-max-width="20rem" />
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
+    controls: { disable: true }
   }
 }

src/components/input/SingleSelect.vue

@@ -15,23 +15,26 @@
     unstyled
     :pt="{
       root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
-        class: [
-          // container
-          'h-10 relative inline-flex cursor-pointer select-none items-center',
-          // trigger surface
+        class: cn(
+          'relative inline-flex cursor-pointer items-center select-none',
+          size === 'md' ? 'h-8' : 'h-10',
           'rounded-lg',
           'bg-secondary-background text-base-foreground',
-          'border-[2.5px] border-solid border-transparent',
           'transition-all duration-200 ease-in-out',
-          'focus-within:border-node-component-border',
-          // disabled
-          { 'opacity-60 cursor-default': props.disabled }
-        ]
+          'hover:bg-secondary-background-hover',
+          'border-[2.5px] border-solid',
+          invalid
+            ? 'border-destructive-background'
+            : 'border-transparent focus-within:border-node-component-border',
+          props.disabled &&
+            'cursor-default opacity-30 hover:bg-secondary-background'
+        )
       }),
       label: {
-        class:
-          // Align with MultiSelect labelContainer spacing
-          'flex-1 flex items-center whitespace-nowrap pl-4 py-2 outline-hidden'
+        class: cn(
+          'flex flex-1 items-center py-2 whitespace-nowrap outline-hidden',
+          size === 'md' ? 'pl-3' : 'pl-4'
+        )
       },
       dropdown: {
         class:
@@ -77,6 +80,8 @@
       }
     }"
     :aria-label="label || t('g.singleSelectDropdown')"
+    :aria-busy="loading || undefined"
+    :aria-invalid="invalid || undefined"
     role="combobox"
     :aria-expanded="false"
     aria-haspopup="listbox"
@@ -84,8 +89,16 @@
   >
     <!-- Trigger value -->
     <template #value="slotProps">
-      <div class="flex items-center gap-2 text-sm">
-        <slot name="icon" />
+      <div
+        :class="
+          cn('flex items-center gap-2', size === 'md' ? 'text-xs' : 'text-sm')
+        "
+      >
+        <i
+          v-if="loading"
+          class="icon-[lucide--loader-circle] animate-spin text-muted-foreground"
+        />
+        <slot v-else name="icon" />
         <span
           v-if="slotProps.value !== null && slotProps.value !== undefined"
           class="text-base-foreground"
@@ -98,9 +111,12 @@
       </div>
     </template>
 
-    <!-- Trigger caret -->
+    <!-- Trigger caret (hidden when loading) -->
     <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
+      <i
+        v-if="!loading"
+        class="icon-[lucide--chevron-down] text-muted-foreground"
+      />
     </template>
 
     <!-- Option row -->
@@ -133,6 +149,9 @@ defineOptions({
 const {
   label,
   options,
+  size = 'lg',
+  invalid = false,
+  loading = false,
   listMaxHeight = '28rem',
   popoverMinWidth,
   popoverMaxWidth
@@ -144,6 +163,12 @@ const {
    * in getLabel() to map values to their display names.
    */
   options?: SelectOption[]
+  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
+  size?: 'lg' | 'md'
+  /** Show invalid (destructive) border */
+  invalid?: boolean
+  /** Show loading spinner instead of chevron */
+  loading?: boolean
   /** Maximum height of the dropdown panel (default: 28rem) */
   listMaxHeight?: string
   /** Minimum width of the popover (default: auto) */

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 = useLoad3dService().getLoad3d(props.node)
+    const source = await useLoad3dService().getLoad3dAsync(props.node)
     if (source) {
       await viewer.initializeViewer(containerRef.value, source)
     }

src/components/loader/LogoCFillLoader.stories.ts

@@ -1,96 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import LogoCFillLoader from './LogoCFillLoader.vue'
-
-const meta: Meta<typeof LogoCFillLoader> = {
-  title: 'Components/Loader/LogoCFillLoader',
-  component: LogoCFillLoader,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-    backgrounds: { default: 'dark' }
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg', 'xl']
-    },
-    color: {
-      control: 'select',
-      options: ['yellow', 'blue', 'white', 'black']
-    },
-    bordered: {
-      control: 'boolean'
-    },
-    disableAnimation: {
-      control: 'boolean'
-    }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
-
-export const Small: Story = {
-  args: { size: 'sm' }
-}
-
-export const Large: Story = {
-  args: { size: 'lg' }
-}
-
-export const ExtraLarge: Story = {
-  args: { size: 'xl' }
-}
-
-export const NoBorder: Story = {
-  args: { bordered: false }
-}
-
-export const Static: Story = {
-  args: { disableAnimation: true }
-}
-
-export const BrandColors: Story = {
-  render: () => ({
-    components: { LogoCFillLoader },
-    template: `
-      <div class="flex items-end gap-12">
-        <div class="flex flex-col items-center gap-2">
-          <span class="text-xs text-neutral-400">Yellow</span>
-          <LogoCFillLoader size="lg" color="yellow" />
-        </div>
-        <div class="flex flex-col items-center gap-2">
-          <span class="text-xs text-neutral-400">Blue</span>
-          <LogoCFillLoader size="lg" color="blue" />
-        </div>
-        <div class="flex flex-col items-center gap-2">
-          <span class="text-xs text-neutral-400">White</span>
-          <LogoCFillLoader size="lg" color="white" />
-        </div>
-        <div class="p-4 bg-white rounded" style="background: white">
-          <div class="flex flex-col items-center gap-2">
-            <span class="text-xs text-neutral-600">Black</span>
-            <LogoCFillLoader size="lg" color="black" />
-          </div>
-        </div>
-      </div>
-    `
-  })
-}
-
-export const AllSizes: Story = {
-  render: () => ({
-    components: { LogoCFillLoader },
-    template: `
-      <div class="flex items-end gap-8">
-        <LogoCFillLoader size="sm" color="yellow" />
-        <LogoCFillLoader size="md" color="yellow" />
-        <LogoCFillLoader size="lg" color="yellow" />
-        <LogoCFillLoader size="xl" color="yellow" />
-      </div>
-    `
-  })
-}

src/components/loader/LogoCFillLoader.vue

@@ -1,100 +0,0 @@
-<template>
-  <span role="status" :class="cn('inline-flex', colorClass)">
-    <svg
-      :width="Math.round(heightMap[size] * (VB_W / VB_H))"
-      :height="heightMap[size]"
-      :viewBox="`0 0 ${VB_W} ${VB_H}`"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <mask :id="maskId">
-          <path :d="C_PATH" fill="white" />
-        </mask>
-      </defs>
-      <path
-        v-if="bordered"
-        :d="C_PATH"
-        stroke="currentColor"
-        stroke-width="2"
-        fill="none"
-        opacity="0.4"
-      />
-      <g :mask="`url(#${maskId})`">
-        <rect
-          :class="disableAnimation ? undefined : 'c-fill-rect'"
-          :x="-BLEED"
-          :y="-BLEED"
-          :width="VB_W + BLEED * 2"
-          :height="VB_H + BLEED * 2"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-    <span class="sr-only">{{ t('g.loading') }}</span>
-  </span>
-</template>
-
-<script setup lang="ts">
-import { useId, computed } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-import { useI18n } from 'vue-i18n'
-
-const {
-  size = 'md',
-  color = 'black',
-  bordered = true,
-  disableAnimation = false
-} = defineProps<{
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  color?: 'yellow' | 'blue' | 'white' | 'black'
-  bordered?: boolean
-  disableAnimation?: boolean
-}>()
-
-const { t } = useI18n()
-const maskId = `c-mask-${useId()}`
-
-const VB_W = 185
-const VB_H = 201
-const BLEED = 1
-
-// Larger than LogoComfyWaveLoader because the C logo is near-square (185×201)
-// while the COMFY wordmark is wide (879×284), so larger heights are needed
-// for visually comparable perceived size.
-const heightMap = { sm: 48, md: 80, lg: 120, xl: 200 } as const
-const colorMap = {
-  yellow: 'text-brand-yellow',
-  blue: 'text-brand-blue',
-  white: 'text-white',
-  black: 'text-black'
-} as const
-
-const colorClass = computed(() => colorMap[color])
-
-const C_PATH =
-  'M42.1217 200.812C37.367 200.812 33.5304 199.045 31.0285 195.703C28.4569 192.27 27.7864 187.477 29.1882 182.557L34.8172 162.791C35.2661 161.217 34.9537 159.523 33.9747 158.214C32.9958 156.908 31.464 156.139 29.8371 156.139L13.6525 156.139C8.89521 156.139 5.05862 154.374 2.55797 151.032C-0.0136533 147.597-0.684085 142.804 0.71869 137.883L20.0565 70.289L22.1916 62.8625C25.0617 52.7847 35.5288 44.5943 45.528 44.5943L64.8938 44.5943C67.2048 44.5943 69.2376 43.0535 69.8738 40.8175L76.2782 18.3344C79.1454 8.26681 89.6127 0.0763962 99.6117 0.0763945L141.029 0.00258328L171.349-2.99253e-05C176.104-3.0756e-05 179.941 1.765 182.442 5.10626C185.013 8.53932 185.684 13.3324 184.282 18.2528L175.612 48.6947C172.746 58.7597 162.279 66.9475 152.28 66.9475L110.771 67.0265L91.4113 67.0265C89.1029 67.0265 87.0727 68.5647 86.4326 70.7983L70.2909 127.179C69.8394 128.756 70.1518 130.454 71.1334 131.763C72.1123 133.07 73.6441 133.839 75.2697 133.839C75.2736 133.839 102.699 133.785 102.699 133.785L132.929 133.785C137.685 133.785 141.522 135.55 144.023 138.892C146.594 142.327 147.265 147.12 145.862 152.041L137.192 182.478C134.326 192.545 123.859 200.733 113.86 200.733L72.3517 200.812L42.1217 200.812Z'
-</script>
-
-<style scoped>
-.c-fill-rect {
-  animation: c-fill-up 2.5s cubic-bezier(0.25, 0, 0.3, 1) forwards;
-  will-change: transform;
-}
-
-@keyframes c-fill-up {
-  0% {
-    transform: translateY(calc(v-bind(VB_H) * 1px + v-bind(BLEED) * 1px));
-  }
-  100% {
-    transform: translateY(calc(v-bind(BLEED) * -1px));
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .c-fill-rect {
-    animation: none;
-  }
-}
-</style>

src/components/maskeditor/MaskEditorContent.vue

@@ -35,11 +35,9 @@
           'z-40': store.activeLayer === 'mask'
         }"
       />
-      <div ref="canvasBackgroundRef" class="size-full" />
+      <div ref="canvasBackgroundRef" class="size-full bg-white" />
     </div>
 
-    <LoadingOverlay :loading="!initialized" size="sm" />
-
     <div class="maskEditor-ui-container flex min-h-0 flex-1 flex-col">
       <div class="flex min-h-0 flex-1 overflow-hidden">
         <ToolPanel
@@ -79,8 +77,6 @@ import { useDialogStore } from '@/stores/dialogStore'
 import { useMaskEditorDataStore } from '@/stores/maskEditorDataStore'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
-import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
-
 import BrushCursor from './BrushCursor.vue'
 import PointerZone from './PointerZone.vue'
 import SidePanel from './SidePanel.vue'

src/components/queue/job/JobFilterActions.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex min-w-0 items-center gap-2">
-    <SearchBox
+    <SearchInput
       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 SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.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/RightSidePanel.vue

@@ -13,6 +13,7 @@ import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
@@ -36,6 +37,7 @@ import TabErrors from './errors/TabErrors.vue'
 
 const canvasStore = useCanvasStore()
 const executionErrorStore = useExecutionErrorStore()
+const missingModelStore = useMissingModelStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
@@ -43,6 +45,8 @@ const { t } = useI18n()
 const { hasAnyError, allErrorExecutionIds, activeMissingNodeGraphIds } =
   storeToRefs(executionErrorStore)
 
+const { activeMissingModelGraphIds } = storeToRefs(missingModelStore)
+
 const { findParentGroup } = useGraphHierarchy()
 
 const { selectedItems: directlySelectedItems } = storeToRefs(canvasStore)
@@ -118,12 +122,21 @@ const hasMissingNodeSelected = computed(
     )
 )
 
+const hasMissingModelSelected = computed(
+  () =>
+    hasSelection.value &&
+    selectedNodes.value.some((node) =>
+      activeMissingModelGraphIds.value.has(String(node.id))
+    )
+)
+
 const hasRelevantErrors = computed(() => {
   if (!hasSelection.value) return hasAnyError.value
   return (
     hasDirectNodeError.value ||
     hasContainerInternalError.value ||
-    hasMissingNodeSelected.value
+    hasMissingNodeSelected.value ||
+    hasMissingModelSelected.value
   )
 })
 
@@ -314,7 +327,11 @@ function handleTitleCancel() {
             :value="tab.value"
           >
             {{ tab.label() }}
-            <i v-if="tab.icon" :class="cn(tab.icon, 'size-4')" />
+            <i
+              v-if="tab.icon"
+              aria-hidden="true"
+              :class="cn(tab.icon, 'size-4')"
+            />
           </Tab>
         </TabList>
       </nav>

src/components/rightSidePanel/errors/TabErrors.vue

@@ -12,7 +12,7 @@
     </div>
 
     <!-- Scrollable content -->
-    <div class="min-w-0 flex-1 overflow-y-auto">
+    <div class="min-w-0 flex-1 overflow-y-auto" aria-live="polite">
       <TransitionGroup tag="div" name="list-scale" class="relative">
         <div
           v-if="filteredGroups.length === 0"
@@ -32,11 +32,7 @@
           :key="group.title"
           :collapse="isSectionCollapsed(group.title) && !isSearching"
           class="border-b border-interface-stroke"
-          :size="
-            group.type === 'missing_node' || group.type === 'swap_nodes'
-              ? 'lg'
-              : 'default'
-          "
+          :size="getGroupSize(group)"
           @update:collapse="setSectionCollapsed(group.title, $event)"
         >
           <template #label>
@@ -130,6 +126,14 @@
               @copy-to-clipboard="copyToClipboard"
             />
           </div>
+
+          <!-- Missing Models -->
+          <MissingModelCard
+            v-else-if="group.type === 'missing_model'"
+            :missing-model-groups="missingModelGroups"
+            :show-node-id-badge="showNodeIdBadge"
+            @locate-model="handleLocateModel"
+          />
         </PropertiesAccordionItem>
       </TransitionGroup>
     </div>
@@ -187,12 +191,14 @@ import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/f
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import MissingNodeCard from './MissingNodeCard.vue'
 import SwapNodesCard from '@/platform/nodeReplacement/components/SwapNodesCard.vue'
+import MissingModelCard from '@/platform/missingModel/components/MissingModelCard.vue'
 import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import { usePackInstall } from '@/workbench/extensions/manager/composables/nodePack/usePackInstall'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 import { useErrorGroups } from './useErrorGroups'
 import type { SwapNodeGroup } from './useErrorGroups'
+import type { ErrorGroup } from './types'
 import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
 
 const { t } = useI18n()
@@ -211,6 +217,15 @@ const { replaceGroup, replaceAllGroups } = useNodeReplacement()
 const searchQuery = ref('')
 const isSearching = computed(() => searchQuery.value.trim() !== '')
 
+const fullSizeGroupTypes = new Set([
+  'missing_node',
+  'swap_nodes',
+  'missing_model'
+])
+function getGroupSize(group: ErrorGroup) {
+  return fullSizeGroupTypes.has(group.type) ? 'lg' : 'default'
+}
+
 const showNodeIdBadge = computed(
   () =>
     (settingStore.get('Comfy.NodeBadge.NodeIdBadgeMode') as NodeBadgeMode) !==
@@ -226,6 +241,7 @@ const {
   errorNodeCache,
   missingNodeCache,
   missingPackGroups,
+  missingModelGroups,
   swapNodeGroups
 } = useErrorGroups(searchQuery, t)
 
@@ -283,6 +299,10 @@ function handleLocateMissingNode(nodeId: string) {
   focusNode(nodeId, missingNodeCache.value)
 }
 
+function handleLocateModel(nodeId: string) {
+  focusNode(nodeId)
+}
+
 function handleOpenManagerInfo(packId: string) {
   const isKnownToRegistry = missingNodePacks.value.some((p) => p.id === packId)
   if (isKnownToRegistry) {

src/components/rightSidePanel/errors/types.ts

@@ -23,3 +23,4 @@ export type ErrorGroup =
     }
   | { type: 'missing_node'; title: string; priority: number }
   | { type: 'swap_nodes'; title: string; priority: number }
+  | { type: 'missing_model'; title: string; priority: number }

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

@@ -47,6 +47,13 @@ vi.mock('@/utils/executableGroupNodeDto', () => ({
   isGroupNode: vi.fn(() => false)
 }))
 
+vi.mock(
+  '@/platform/missingModel/composables/useMissingModelInteractions',
+  () => ({
+    clearMissingModelState: vi.fn()
+  })
+)
+
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useErrorGroups } from './useErrorGroups'
 
@@ -520,4 +527,115 @@ describe('useErrorGroups', () => {
       expect(typeof groups.collapseState).toBe('object')
     })
   })
+
+  describe('missingModelGroups', () => {
+    function makeModel(
+      name: string,
+      opts: {
+        nodeId?: string | number
+        widgetName?: string
+        directory?: string
+        isAssetSupported?: boolean
+      } = {}
+    ) {
+      return {
+        name,
+        nodeId: opts.nodeId ?? '1',
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: opts.widgetName ?? 'ckpt_name',
+        isAssetSupported: opts.isAssetSupported ?? false,
+        isMissing: true as const,
+        directory: opts.directory
+      }
+    }
+
+    it('returns empty array when no missing models', () => {
+      const { groups } = createErrorGroups()
+      expect(groups.missingModelGroups.value).toEqual([])
+    })
+
+    it('groups asset-supported models by directory', async () => {
+      const { store, groups } = createErrorGroups()
+      store.surfaceMissingModels([
+        makeModel('model_a.safetensors', {
+          directory: 'checkpoints',
+          isAssetSupported: true
+        }),
+        makeModel('model_b.safetensors', {
+          nodeId: '2',
+          directory: 'checkpoints',
+          isAssetSupported: true
+        }),
+        makeModel('lora_a.safetensors', {
+          nodeId: '3',
+          directory: 'loras',
+          isAssetSupported: true
+        })
+      ])
+      await nextTick()
+
+      expect(groups.missingModelGroups.value).toHaveLength(2)
+      const ckptGroup = groups.missingModelGroups.value.find(
+        (g) => g.directory === 'checkpoints'
+      )
+      expect(ckptGroup?.models).toHaveLength(2)
+      expect(ckptGroup?.isAssetSupported).toBe(true)
+    })
+
+    it('puts unsupported models in a separate group', async () => {
+      const { store, groups } = createErrorGroups()
+      store.surfaceMissingModels([
+        makeModel('model_a.safetensors', {
+          directory: 'checkpoints',
+          isAssetSupported: true
+        }),
+        makeModel('custom_model.safetensors', {
+          nodeId: '2',
+          isAssetSupported: false
+        })
+      ])
+      await nextTick()
+
+      expect(groups.missingModelGroups.value).toHaveLength(2)
+      const unsupported = groups.missingModelGroups.value.find(
+        (g) => !g.isAssetSupported
+      )
+      expect(unsupported?.models).toHaveLength(1)
+    })
+
+    it('merges same-named models into one view model with multiple referencingNodes', async () => {
+      const { store, groups } = createErrorGroups()
+      store.surfaceMissingModels([
+        makeModel('shared_model.safetensors', {
+          nodeId: '1',
+          widgetName: 'ckpt_name',
+          directory: 'checkpoints',
+          isAssetSupported: true
+        }),
+        makeModel('shared_model.safetensors', {
+          nodeId: '2',
+          widgetName: 'ckpt_name',
+          directory: 'checkpoints',
+          isAssetSupported: true
+        })
+      ])
+      await nextTick()
+
+      expect(groups.missingModelGroups.value).toHaveLength(1)
+      const model = groups.missingModelGroups.value[0].models[0]
+      expect(model.name).toBe('shared_model.safetensors')
+      expect(model.referencingNodes).toHaveLength(2)
+    })
+
+    it('includes missing_model group in allErrorGroups', async () => {
+      const { store, groups } = createErrorGroups()
+      store.surfaceMissingModels([makeModel('model_a.safetensors')])
+      await nextTick()
+
+      const modelGroup = groups.allErrorGroups.value.find(
+        (g) => g.type === 'missing_model'
+      )
+      expect(modelGroup).toBeDefined()
+    })
+  })
 })

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -3,6 +3,7 @@ import type { MaybeRefOrGetter } from 'vue'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 
+import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -23,6 +24,11 @@ import { st } from '@/i18n'
 import type { MissingNodeType } from '@/types/comfy'
 import type { ErrorCardData, ErrorGroup, ErrorItem } from './types'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
+import type {
+  MissingModelCandidate,
+  MissingModelGroup
+} from '@/platform/missingModel/types'
+import { groupCandidatesByName } from '@/platform/missingModel/missingModelScan'
 import {
   isNodeExecutionId,
   compareExecutionId
@@ -39,6 +45,9 @@ const KNOWN_PROMPT_ERROR_TYPES = new Set([
 /** Sentinel: distinguishes "fetch in-flight" from "fetch done, pack not found (null)". */
 const RESOLVING = '__RESOLVING__'
 
+/** Sentinel key for grouping non-asset-supported missing models. */
+const UNSUPPORTED = Symbol('unsupported')
+
 export interface MissingPackGroup {
   packId: string | null
   nodeTypes: MissingNodeType[]
@@ -231,6 +240,7 @@ export function useErrorGroups(
   t: (key: string) => string
 ) {
   const executionErrorStore = useExecutionErrorStore()
+  const missingModelStore = useMissingModelStore()
   const canvasStore = useCanvasStore()
   const { inferPackFromNodeName } = useComfyRegistryStore()
   const collapseState = reactive<Record<string, boolean>>({})
@@ -559,6 +569,60 @@ export function useErrorGroups(
     return groups.sort((a, b) => a.priority - b.priority)
   }
 
+  /** Groups missing models. Asset-supported models group by directory; others go into a separate group.
+   *  Within each group, candidates with the same model name are merged into a single view model. */
+  const missingModelGroups = computed<MissingModelGroup[]>(() => {
+    const candidates = missingModelStore.missingModelCandidates
+    if (!candidates?.length) return []
+
+    type GroupKey = string | null | typeof UNSUPPORTED
+    const map = new Map<
+      GroupKey,
+      { candidates: MissingModelCandidate[]; isAssetSupported: boolean }
+    >()
+
+    for (const c of candidates) {
+      const groupKey: GroupKey = c.isAssetSupported
+        ? c.directory || null
+        : UNSUPPORTED
+
+      const existing = map.get(groupKey)
+      if (existing) {
+        existing.candidates.push(c)
+      } else {
+        map.set(groupKey, {
+          candidates: [c],
+          isAssetSupported: c.isAssetSupported
+        })
+      }
+    }
+
+    return Array.from(map.entries())
+      .sort(([dirA], [dirB]) => {
+        if (dirA === UNSUPPORTED) return 1
+        if (dirB === UNSUPPORTED) return -1
+        if (dirA === null) return 1
+        if (dirB === null) return -1
+        return dirA.localeCompare(dirB)
+      })
+      .map(([key, { candidates: groupCandidates, isAssetSupported }]) => ({
+        directory: typeof key === 'string' ? key : null,
+        models: groupCandidatesByName(groupCandidates),
+        isAssetSupported
+      }))
+  })
+
+  function buildMissingModelGroups(): ErrorGroup[] {
+    if (!missingModelGroups.value.length) return []
+    return [
+      {
+        type: 'missing_model' as const,
+        title: `${t('rightSidePanel.missingModels.missingModelsTitle')} (${missingModelGroups.value.reduce((count, group) => count + group.models.length, 0)})`,
+        priority: 2
+      }
+    ]
+  }
+
   const allErrorGroups = computed<ErrorGroup[]>(() => {
     const groupsMap = new Map<string, GroupEntry>()
 
@@ -566,7 +630,11 @@ export function useErrorGroups(
     processNodeErrors(groupsMap)
     processExecutionError(groupsMap)
 
-    return [...buildMissingNodeGroups(), ...toSortedGroups(groupsMap)]
+    return [
+      ...buildMissingNodeGroups(),
+      ...buildMissingModelGroups(),
+      ...toSortedGroups(groupsMap)
+    ]
   })
 
   const tabErrorGroups = computed<ErrorGroup[]>(() => {
@@ -580,7 +648,11 @@ export function useErrorGroups(
       ? toSortedGroups(regroupByErrorMessage(groupsMap))
       : toSortedGroups(groupsMap)
 
-    return [...buildMissingNodeGroups(), ...executionGroups]
+    return [
+      ...buildMissingNodeGroups(),
+      ...buildMissingModelGroups(),
+      ...executionGroups
+    ]
   })
 
   const filteredGroups = computed<ErrorGroup[]>(() => {
@@ -615,6 +687,7 @@ export function useErrorGroups(
     missingNodeCache,
     groupedErrorMessages,
     missingPackGroups,
+    missingModelGroups,
     swapNodeGroups
   }
 }

src/components/rightSidePanel/parameters/SectionWidgets.vue

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

src/components/sidebar/SideToolbar.vue

@@ -48,13 +48,24 @@
       </div>
     </div>
     <HelpCenterPopups :is-small="isSmall" />
+    <Suspense v-if="NightlySurveyController">
+      <component :is="NightlySurveyController" />
+    </Suspense>
   </nav>
 </template>
 
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core'
 import { debounce } from 'es-toolkit/compat'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  computed,
+  defineAsyncComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import HelpCenterPopups from '@/components/helpcenter/HelpCenterPopups.vue'
@@ -62,7 +73,7 @@ import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
-import { isCloud } from '@/platform/distribution/types'
+import { isCloud, isDesktop, isNightly } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -78,6 +89,13 @@ import SidebarIcon from './SidebarIcon.vue'
 import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
 import SidebarTemplatesButton from './SidebarTemplatesButton.vue'
 
+const NightlySurveyController =
+  isNightly && !isCloud && !isDesktop
+    ? defineAsyncComponent(
+        () => import('@/platform/surveys/NightlySurveyController.vue')
+      )
+    : undefined
+
 const { t } = useI18n()
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -90,6 +90,7 @@ import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
 import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { getAssetDisplayName } from '@/platform/assets/utils/assetMetadataUtils'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
 import { useAssetsStore } from '@/stores/assetsStore'
 import {
@@ -135,10 +136,6 @@ const listGridStyle = {
   gap: '0.5rem'
 }
 
-function getAssetDisplayName(asset: AssetItem): string {
-  return asset.display_name || asset.name
-}
-
 function getAssetPrimaryText(asset: AssetItem): string {
   return truncateFilename(getAssetDisplayName(asset))
 }

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -236,6 +236,7 @@ import { useOutputStacks } from '@/platform/assets/composables/useOutputStacks'
 import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { getAssetDisplayName } from '@/platform/assets/utils/assetMetadataUtils'
 import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
 import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
 import { isCloud } from '@/platform/distribution/types'
@@ -569,7 +570,7 @@ const handleZoomClick = (asset: AssetItem) => {
     const dialogStore = useDialogStore()
     dialogStore.showDialog({
       key: 'asset-3d-viewer',
-      title: asset.display_name || asset.name,
+      title: getAssetDisplayName(asset),
       component: Load3dViewerContent,
       props: {
         modelUrl: asset.preview_url || ''

src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue

@@ -21,7 +21,7 @@
     </template>
     <template #header>
       <div class="px-2 2xl:px-4">
-        <SearchBox
+        <SearchInput
           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 SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.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">
-        <SearchBox
+        <SearchInput
           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 SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.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,18 +86,40 @@
       </template>
       <template #header>
         <div class="px-2 2xl:px-4">
-          <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"
-          />
+          <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>
 
           <Popover ref="searchFilter" class="ml-[-13px]">
             <NodeSearchFilter @add-filter="onAddFilter" />
@@ -155,8 +177,9 @@ import {
 } from 'vue'
 
 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
-import SearchBox from '@/components/common/SearchBox.vue'
+import SearchFilterChip from '@/components/common/SearchFilterChip.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/common/SearchBoxV2.vue', () => ({
+vi.mock('@/components/ui/search-input/SearchInput.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">
-          <SearchBox
+          <SearchInput
             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 SearchBox from '@/components/common/SearchBoxV2.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.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 SearchBox> | null>(null)
+const searchBoxRef = ref<InstanceType<typeof SearchInput> | null>(null)
 const searchQuery = ref('')
 const expandedKeysByTab = ref<Record<TabId, string[]>>({
   essentials: [],

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

@@ -0,0 +1,213 @@
+<template>
+  <ComboboxRoot
+    v-model="modelValue"
+    v-model:open="isOpen"
+    ignore-filter
+    :disabled
+    :class="className"
+  >
+    <ComboboxAnchor
+      :class="
+        cn(
+          searchInputVariants({ size }),
+          disabled && 'pointer-events-none opacity-50'
+        )
+      "
+      @click="focus"
+    >
+      <Button
+        v-if="modelValue"
+        :class="cn('absolute', sizeConfig.clearPos)"
+        variant="textonly"
+        size="icon-sm"
+        :aria-label="$t('g.clear')"
+        @click.stop="clearSearch"
+      >
+        <i :class="cn('icon-[lucide--x]', sizeConfig.icon)" />
+      </Button>
+      <i
+        v-else-if="loading"
+        :class="
+          cn(
+            'pointer-events-none absolute icon-[lucide--loader-circle] animate-spin',
+            sizeConfig.iconPos,
+            sizeConfig.icon
+          )
+        "
+      />
+      <i
+        v-else
+        :class="
+          cn(
+            'pointer-events-none absolute',
+            sizeConfig.iconPos,
+            sizeConfig.icon,
+            icon
+          )
+        "
+      />
+
+      <ComboboxInput
+        ref="inputRef"
+        v-model="modelValue"
+        :class="
+          cn(
+            'size-full border-none bg-transparent outline-none',
+            sizeConfig.inputPl,
+            sizeConfig.inputText
+          )
+        "
+        :placeholder="placeholderText"
+        :auto-focus="autofocus"
+        @compositionstart="isComposing = true"
+        @compositionend="isComposing = false"
+        @keydown.enter="onEnterKey"
+      />
+    </ComboboxAnchor>
+
+    <ComboboxContent
+      v-if="suggestions.length > 0"
+      position="popper"
+      :side-offset="4"
+      :class="
+        cn(
+          'z-50 max-h-60 w-(--reka-combobox-trigger-width) overflow-y-auto',
+          'rounded-lg border border-border-default bg-base-background p-1 shadow-lg'
+        )
+      "
+    >
+      <ComboboxItem
+        v-for="(suggestion, index) in suggestions"
+        :key="suggestionKey(suggestion, index)"
+        :value="suggestionValue(suggestion)"
+        :class="
+          cn(
+            'cursor-pointer rounded-sm px-3 py-2 text-sm outline-none',
+            'data-highlighted:bg-secondary-background-hover'
+          )
+        "
+        @select.prevent="onSelectSuggestion(suggestion)"
+      >
+        <slot name="suggestion" :suggestion>
+          {{ suggestionLabel(suggestion) }}
+        </slot>
+      </ComboboxItem>
+    </ComboboxContent>
+  </ComboboxRoot>
+</template>
+
+<script setup lang="ts" generic="T">
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxRoot
+} from 'reka-ui'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import type { SearchInputVariants } from './searchInput.variants'
+import {
+  searchInputSizeConfig,
+  searchInputVariants
+} from './searchInput.variants'
+
+const { t } = useI18n()
+
+const {
+  placeholder,
+  icon = 'icon-[lucide--search]',
+  autofocus = false,
+  loading = false,
+  disabled = false,
+  size = 'md',
+  suggestions = [],
+  optionLabel,
+  optionKey,
+  class: className
+} = defineProps<{
+  placeholder?: string
+  icon?: string
+  autofocus?: boolean
+  loading?: boolean
+  disabled?: boolean
+  size?: SearchInputVariants['size']
+  suggestions?: T[]
+  optionLabel?: keyof T & string
+  optionKey?: keyof T & string
+  class?: HTMLAttributes['class']
+}>()
+
+const emit = defineEmits<{
+  select: [item: T]
+}>()
+
+const sizeConfig = computed(() => searchInputSizeConfig[size])
+
+const modelValue = defineModel<string>({ required: true })
+
+const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
+const isOpen = ref(false)
+const isComposing = ref(false)
+
+function focus() {
+  inputRef.value?.$el?.focus()
+}
+
+defineExpose({ focus })
+
+const placeholderText = computed(
+  () => placeholder ?? t('g.searchPlaceholder', { subject: '' })
+)
+
+function clearSearch() {
+  modelValue.value = ''
+  focus()
+}
+
+function getItemProperty(item: T, key: keyof T & string): string {
+  if (typeof item === 'object' && item !== null) {
+    return String(item[key])
+  }
+  return String(item)
+}
+
+function suggestionLabel(item: T): string {
+  if (optionLabel) return getItemProperty(item, optionLabel)
+  return String(item)
+}
+
+function suggestionKey(item: T, index: number): string {
+  if (optionKey) return getItemProperty(item, optionKey)
+  return `${suggestionLabel(item)}-${index}`
+}
+
+function suggestionValue(item: T): string {
+  return suggestionLabel(item)
+}
+
+function onSelectSuggestion(item: T) {
+  modelValue.value = suggestionLabel(item)
+  isOpen.value = false
+  emit('select', item)
+}
+
+function onEnterKey(e: KeyboardEvent) {
+  if (isComposing.value) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+}
+
+watch(
+  () => suggestions,
+  (items) => {
+    isOpen.value = items.length > 0 && !!modelValue.value
+  }
+)
+</script>

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

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

src/components/ui/select/Select.stories.ts

@@ -1,261 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-import Select from './Select.vue'
-import SelectContent from './SelectContent.vue'
-import SelectGroup from './SelectGroup.vue'
-import SelectItem from './SelectItem.vue'
-import SelectLabel from './SelectLabel.vue'
-import SelectSeparator from './SelectSeparator.vue'
-import SelectTrigger from './SelectTrigger.vue'
-import SelectValue from './SelectValue.vue'
-
-const meta = {
-  title: 'Components/Select',
-  component: Select,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'text',
-      description: 'Selected value'
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'When true, disables the select'
-    },
-    'onUpdate:modelValue': { action: 'update:modelValue' }
-  }
-} satisfies Meta<typeof Select>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref(args.modelValue || '')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="cherry">Cherry</SelectItem>
-          <SelectItem value="grape">Grape</SelectItem>
-          <SelectItem value="orange">Orange</SelectItem>
-        </SelectContent>
-      </Select>
-      <div class="mt-4 text-sm text-muted-foreground">
-        Selected: {{ value || 'None' }}
-      </div>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const WithPlaceholder: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Choose an option..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-          <SelectItem value="option2">Option 2</SelectItem>
-          <SelectItem value="option3">Option 3</SelectItem>
-        </SelectContent>
-      </Select>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const Disabled: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('apple')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" disabled>
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="cherry">Cherry</SelectItem>
-        </SelectContent>
-      </Select>
-    `
-  })
-}
-
-export const WithGroups: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectGroup,
-      SelectItem,
-      SelectLabel,
-      SelectSeparator,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select a model type" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Checkpoints</SelectLabel>
-            <SelectItem value="sd15">SD 1.5</SelectItem>
-            <SelectItem value="sdxl">SDXL</SelectItem>
-            <SelectItem value="flux">Flux</SelectItem>
-          </SelectGroup>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>LoRAs</SelectLabel>
-            <SelectItem value="lora-style">Style LoRA</SelectItem>
-            <SelectItem value="lora-character">Character LoRA</SelectItem>
-          </SelectGroup>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>Other</SelectLabel>
-            <SelectItem value="vae">VAE</SelectItem>
-            <SelectItem value="embedding">Embedding</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <div class="mt-4 text-sm text-muted-foreground">
-        Selected: {{ value || 'None' }}
-      </div>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const Scrollable: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      const items = Array.from({ length: 20 }, (_, i) => ({
-        value: `item-${i + 1}`,
-        label: `Option ${i + 1}`
-      }))
-      return { value, items, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select an option" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem
-            v-for="item in items"
-            :key="item.value"
-            :value="item.value"
-          >
-            {{ item.label }}
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const CustomWidth: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      return { value, args }
-    },
-    template: `
-      <div class="space-y-4">
-        <Select v-model="value" :disabled="args.disabled">
-          <SelectTrigger class="w-32">
-            <SelectValue placeholder="Small" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="a">A</SelectItem>
-            <SelectItem value="b">B</SelectItem>
-            <SelectItem value="c">C</SelectItem>
-          </SelectContent>
-        </Select>
-
-        <Select v-model="value" :disabled="args.disabled">
-          <SelectTrigger class="w-full">
-            <SelectValue placeholder="Full width select" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-            <SelectItem value="option3">Option 3</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}

src/components/ui/select/SelectContent.vue

@@ -64,6 +64,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         )
       "
     >
+      <slot name="prepend" />
       <SelectScrollUpButton />
       <SelectViewport
         :class="

src/components/ui/select/SelectGroup.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { SelectGroupProps } from 'reka-ui'
-import { SelectGroup } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectGroupProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectGroup :class="cn('w-full', className)" v-bind="restProps">
-    <slot />
-  </SelectGroup>
-</template>

src/components/ui/select/SelectLabel.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { SelectLabelProps } from 'reka-ui'
-import { SelectLabel } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectLabelProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectLabel
-    v-bind="restProps"
-    :class="
-      cn(
-        'px-3 py-2 text-xs tracking-wide text-muted-foreground uppercase',
-        className
-      )
-    "
-  >
-    <slot />
-  </SelectLabel>
-</template>

src/components/ui/select/SelectSeparator.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { SelectSeparatorProps } from 'reka-ui'
-import { SelectSeparator } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectSeparatorProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectSeparator
-    v-bind="restProps"
-    :class="cn('-mx-1 my-1 h-px bg-border-default', className)"
-  />
-</template>

src/components/ui/select/SelectTrigger.vue

@@ -5,24 +5,41 @@ import type { HTMLAttributes } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
-const { class: className, ...restProps } = defineProps<
-  SelectTriggerProps & { class?: HTMLAttributes['class'] }
+const {
+  class: className,
+  size = 'lg',
+  invalid = false,
+  ...restProps
+} = defineProps<
+  SelectTriggerProps & {
+    class?: HTMLAttributes['class']
+    /** Trigger size: 'lg' (40px) or 'md' (32px) */
+    size?: 'lg' | 'md'
+    /** Show invalid (destructive) border */
+    invalid?: boolean
+  }
 >()
 </script>
 
 <template>
   <SelectTrigger
     v-bind="restProps"
+    :aria-invalid="invalid || undefined"
     :class="
       cn(
-        'flex h-10 w-full cursor-pointer items-center justify-between select-none',
-        'rounded-lg px-4 py-2 text-sm',
+        'flex w-full cursor-pointer items-center justify-between select-none',
+        size === 'md' ? 'h-8 px-3 py-1 text-xs' : 'h-10 px-4 py-2 text-sm',
+        'rounded-lg',
         'bg-secondary-background text-base-foreground',
-        'border-[2.5px] border-solid border-transparent',
         'transition-all duration-200 ease-in-out',
-        'focus:border-node-component-border focus:outline-none',
+        'hover:bg-secondary-background-hover',
+        'border-[2.5px] border-solid',
+        invalid
+          ? 'border-destructive-background'
+          : 'border-transparent focus:border-node-component-border',
+        'focus:outline-none',
         'data-placeholder:text-muted-foreground',
-        'disabled:cursor-not-allowed disabled:opacity-60',
+        'disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-secondary-background',
         '[&>span]:truncate',
         className
       )

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

@@ -0,0 +1,77 @@
+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>
-      <SearchBox v-model="searchQuery" size="lg" class="max-w-[384px]" />
+      <SearchInput v-model="searchQuery" size="lg" class="max-w-96 flex-1" />
     </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 SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.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 SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.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,
-    SearchBox,
+    SearchInput,
     MultiSelect,
     SingleSelect,
     Button,
@@ -186,7 +186,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Header -->
         <template v-if="args.hasHeader" #header>
-          <SearchBox
+          <SearchInput
             class="max-w-[384px]"
             size="lg"
             :modelValue="searchQuery"
@@ -309,7 +309,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Header -->
         <template v-if="args.hasHeader" #header>
-          <SearchBox
+          <SearchInput
             class="max-w-[384px]"
             size="lg"
             :modelValue="searchQuery"

src/composables/graph/useGraphNodeManager.test.ts

@@ -238,232 +238,6 @@ 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 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', () => {
@@ -541,54 +315,4 @@ 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}`
-      ])
-    )
-  })
 })