[backport core/1.41] feat: App mode - allow resizing of textarea and image previews (#10344)

Backport of #9792 to `core/1.41`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10344-backport-core-1-41-feat-App-mode-allow-resizing-of-textarea-and-image-previews-3296d73d365081338771e26dd9bdd691)
by [Unito](https://www.unito.io)

Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>

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

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

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

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

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

@@ -1,96 +0,0 @@
-# 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/`.

.env_example

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,8 +4,6 @@ name: 'CI: Tests Storybook'
 on:
   workflow_dispatch: # Allow manual triggering
   pull_request:
-  push:
-    branches: [main]
 
 jobs:
   # Post starting comment for non-forked PRs
@@ -140,29 +138,6 @@ 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, synchronize]
+    types: [labeled]
   workflow_dispatch:
 
 permissions: {}
@@ -26,18 +26,11 @@ concurrency:
 jobs:
   dispatch:
     # Fork guard: prevent forks from dispatching to the cloud repo.
-    # For pull_request events, only dispatch for preview labels.
-    # - labeled: fires when a label is added; check the added label name.
-    # - synchronize: fires on push; check existing labels on the PR.
+    # For pull_request events, only dispatch when the 'preview' label is added.
     if: >
       github.repository == 'Comfy-Org/ComfyUI_frontend' &&
       (github.event_name != 'pull_request' ||
-       (github.event.action == 'labeled' &&
-        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
-       (github.event.action == 'synchronize' &&
-        (contains(github.event.pull_request.labels.*.name, 'preview') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))
+       github.event.label.name == 'preview')
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload
@@ -46,10 +39,6 @@ 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}"
@@ -61,15 +50,11 @@ jobs:
           else
             REF="${GITHUB_SHA}"
             BRANCH="${GITHUB_REF_NAME}"
-            PR_NUMBER=""
-            VARIANT=""
           fi
           payload="$(jq -nc \
             --arg ref "${REF}" \
             --arg branch "${BRANCH}" \
-            --arg pr_number "${PR_NUMBER}" \
-            --arg variant "${VARIANT}" \
-            '{ref: $ref, branch: $branch, pr_number: $pr_number, variant: $variant}')"
+            '{ref: $ref, branch: $branch}')"
           echo "json=${payload}" >> "${GITHUB_OUTPUT}"
 
       - name: Dispatch to cloud repo

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

@@ -1,39 +0,0 @@
----
-# 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-file: '.nvmrc'
+          node-version: '20'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

browser_tests/README.md

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

browser_tests/assets/subgraphs/nested-duplicate-widget-names.json

@@ -0,0 +1,172 @@
+{
+  "id": "9efdcc44-6372-4b4a-b6f9-789c67f052e1",
+  "revision": 0,
+  "last_node_id": 4,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 4,
+      "type": "f5d6b5f0-64e3-4d3e-bb28-d25d8a6c182f",
+      "pos": [689.0083557128902, 467.9999999999997],
+      "size": [431.8999938964844, 206.60000610351562],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "proxyWidgets": [["3", "text", "2"]]
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "9a3f232c-da11-4725-8927-b11e46d0cee4",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 4,
+          "lastLinkId": 0,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Inner Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [330, 367, 120, 40]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [983, 367, 120, 40]
+        },
+        "inputs": [],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CLIPTextEncode",
+            "pos": [510, 166],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": ["11111111111"]
+          },
+          {
+            "id": 2,
+            "type": "CLIPTextEncode",
+            "pos": [523, 438],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": ["22222222222"]
+          }
+        ],
+        "groups": [],
+        "links": [],
+        "extra": {}
+      },
+      {
+        "id": "f5d6b5f0-64e3-4d3e-bb28-d25d8a6c182f",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 4,
+          "lastLinkId": 0,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Outer Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [467, 446, 120, 40]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [932, 446, 120, 40]
+        },
+        "inputs": [],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 3,
+            "type": "9a3f232c-da11-4725-8927-b11e46d0cee4",
+            "pos": [647, 389],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [],
+            "properties": {
+              "proxyWidgets": [
+                ["1", "text"],
+                ["2", "text"]
+              ]
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 2.0975,
+      "offset": [-581.4780189305006, -356.3000030517576]
+    },
+    "frontendVersion": "1.43.2"
+  },
+  "version": 0.4
+}

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -33,6 +33,7 @@ export class NodeOperationsHelper {
     })
   }
 
+  /** Reads from `window.app.graph` (the root workflow graph). */
   async getNodeCount(): Promise<number> {
     return await this.page.evaluate(() => window.app!.graph.nodes.length)
   }

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -1,3 +1,4 @@
+import { expect } from '@playwright/test'
 import type { Page } from '@playwright/test'
 
 import type {
@@ -6,6 +7,7 @@ import type {
 } from '@/lib/litegraph/src/litegraph'
 
 import type { ComfyPage } from '../ComfyPage'
+import { TestIds } from '../selectors'
 import type { NodeReference } from '../utils/litegraphUtils'
 import { SubgraphSlotReference } from '../utils/litegraphUtils'
 
@@ -322,4 +324,93 @@ export class SubgraphHelper {
     )
     await this.comfyPage.nextFrame()
   }
+
+  async isInSubgraph(): Promise<boolean> {
+    return this.page.evaluate(() => {
+      const graph = window.app!.canvas.graph
+      return !!graph && 'inputNode' in graph
+    })
+  }
+
+  async exitViaBreadcrumb(): Promise<void> {
+    const breadcrumb = this.page.getByTestId(TestIds.breadcrumb.subgraph)
+    const parentLink = breadcrumb.getByRole('link').first()
+    if (await parentLink.isVisible()) {
+      await parentLink.click()
+    } else {
+      await this.page.evaluate(() => {
+        const canvas = window.app!.canvas
+        const graph = canvas.graph
+        if (!graph) return
+        canvas.setGraph(graph.rootGraph)
+      })
+    }
+
+    await this.comfyPage.nextFrame()
+    await expect.poll(async () => this.isInSubgraph()).toBe(false)
+  }
+
+  async countGraphPseudoPreviewEntries(): Promise<number> {
+    return this.page.evaluate(() => {
+      const graph = window.app!.graph!
+      return graph.nodes.reduce((count, node) => {
+        const proxyWidgets = node.properties?.proxyWidgets
+        if (!Array.isArray(proxyWidgets)) return count
+
+        return (
+          count +
+          proxyWidgets.filter(
+            (entry) =>
+              Array.isArray(entry) &&
+              entry.length >= 2 &&
+              typeof entry[1] === 'string' &&
+              entry[1].startsWith('$$')
+          ).length
+        )
+      }, 0)
+    })
+  }
+
+  async getHostPromotedTupleSnapshot(): Promise<
+    { hostNodeId: string; promotedWidgets: [string, string][] }[]
+  > {
+    return this.page.evaluate(() => {
+      const graph = window.app!.canvas.graph!
+      return graph._nodes
+        .filter(
+          (node) =>
+            typeof node.isSubgraphNode === 'function' && node.isSubgraphNode()
+        )
+        .map((node) => {
+          const proxyWidgets = Array.isArray(node.properties?.proxyWidgets)
+            ? node.properties.proxyWidgets
+            : []
+          const promotedWidgets = proxyWidgets
+            .filter(
+              (entry): entry is [string, string] =>
+                Array.isArray(entry) &&
+                entry.length >= 2 &&
+                typeof entry[0] === 'string' &&
+                typeof entry[1] === 'string'
+            )
+            .map(
+              ([interiorNodeId, widgetName]) =>
+                [interiorNodeId, widgetName] as [string, string]
+            )
+
+          return {
+            hostNodeId: String(node.id),
+            promotedWidgets
+          }
+        })
+        .sort((a, b) => Number(a.hostNodeId) - Number(b.hostNodeId))
+    })
+  }
+
+  /** Reads from `window.app.canvas.graph` (viewed root or nested subgraph). */
+  async getNodeCount(): Promise<number> {
+    return this.page.evaluate(() => {
+      return window.app!.canvas.graph!.nodes?.length || 0
+    })
+  }
 }

browser_tests/helpers/promotedWidgets.ts

@@ -2,6 +2,11 @@ import type { ComfyPage } from '../fixtures/ComfyPage'
 
 export type PromotedWidgetEntry = [string, string]
 
+export interface PromotedWidgetSnapshot {
+  proxyWidgets: PromotedWidgetEntry[]
+  widgetNames: string[]
+}
+
 export function isPromotedWidgetEntry(
   entry: unknown
 ): entry is PromotedWidgetEntry {
@@ -32,6 +37,28 @@ export async function getPromotedWidgets(
   return normalizePromotedWidgets(raw)
 }
 
+export async function getPromotedWidgetSnapshot(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<PromotedWidgetSnapshot> {
+  const raw = await comfyPage.page.evaluate((id) => {
+    const node = window.app!.canvas.graph!.getNodeById(id)
+    return {
+      proxyWidgets: node?.properties?.proxyWidgets ?? [],
+      widgetNames: (node?.widgets ?? []).map((widget) => widget.name)
+    }
+  }, nodeId)
+
+  return {
+    proxyWidgets: normalizePromotedWidgets(raw.proxyWidgets),
+    widgetNames: Array.isArray(raw.widgetNames)
+      ? raw.widgetNames.filter(
+          (name): name is string => typeof name === 'string'
+        )
+      : []
+  }
+}
+
 export async function getPromotedWidgetNames(
   comfyPage: ComfyPage,
   nodeId: string
@@ -48,6 +75,26 @@ export async function getPromotedWidgetCount(
   return promotedWidgets.length
 }
 
+export function isPseudoPreviewEntry(entry: PromotedWidgetEntry): boolean {
+  return entry[1].startsWith('$$')
+}
+
+export async function getPseudoPreviewWidgets(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<PromotedWidgetEntry[]> {
+  const widgets = await getPromotedWidgets(comfyPage, nodeId)
+  return widgets.filter(isPseudoPreviewEntry)
+}
+
+export async function getNonPreviewPromotedWidgets(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<PromotedWidgetEntry[]> {
+  const widgets = await getPromotedWidgets(comfyPage, nodeId)
+  return widgets.filter((entry) => !isPseudoPreviewEntry(entry))
+}
+
 export async function getPromotedWidgetCountByName(
   comfyPage: ComfyPage,
   nodeId: string,

browser_tests/tests/dialog.spec.ts

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

browser_tests/tests/groupCopyPaste.spec.ts

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

browser_tests/tests/rendererToggleStability.spec.ts

@@ -0,0 +1,104 @@
+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/subgraph-duplicate-ids.spec.ts

@@ -43,6 +43,31 @@ test.describe('Subgraph duplicate ID remapping', { tag: ['@subgraph'] }, () => {
     expect(rootIds).toEqual([1, 2, 5])
   })
 
+  test('Promoted widget tuples are stable after full page reload boot path', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+    await comfyPage.nextFrame()
+
+    const beforeSnapshot =
+      await comfyPage.subgraph.getHostPromotedTupleSnapshot()
+    expect(beforeSnapshot.length).toBeGreaterThan(0)
+    expect(
+      beforeSnapshot.some(({ promotedWidgets }) => promotedWidgets.length > 0)
+    ).toBe(true)
+
+    await comfyPage.page.reload()
+    await comfyPage.page.waitForFunction(() => !!window.app)
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+    await comfyPage.nextFrame()
+
+    await expect(async () => {
+      const afterSnapshot =
+        await comfyPage.subgraph.getHostPromotedTupleSnapshot()
+      expect(afterSnapshot).toEqual(beforeSnapshot)
+    }).toPass({ timeout: 5_000 })
+  })
+
   test('All links reference valid nodes in their graph', async ({
     comfyPage
   }) => {

browser_tests/tests/subgraph.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 // Constants
 const RENAMED_INPUT_NAME = 'renamed_input'
@@ -631,6 +632,51 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       expect(updatedBreadcrumbText).toContain(UPDATED_SUBGRAPH_TITLE)
       expect(updatedBreadcrumbText).not.toBe(initialBreadcrumbText)
     })
+
+    test('Switching workflows while inside subgraph returns to root graph context', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+      await comfyPage.nextFrame()
+
+      expect(await isInSubgraph(comfyPage)).toBe(true)
+      await expect(comfyPage.page.locator(SELECTORS.breadcrumb)).toBeVisible()
+
+      await comfyPage.workflow.loadWorkflow('default')
+      await comfyPage.nextFrame()
+
+      expect(await isInSubgraph(comfyPage)).toBe(false)
+
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+      expect(await isInSubgraph(comfyPage)).toBe(false)
+    })
+
+    test('Breadcrumb disappears after switching workflows while inside subgraph', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      const breadcrumb = comfyPage.page
+        .getByTestId(TestIds.breadcrumb.subgraph)
+        .locator('.p-breadcrumb')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+      await comfyPage.nextFrame()
+
+      await expect(breadcrumb).toBeVisible()
+
+      await comfyPage.workflow.loadWorkflow('default')
+      await comfyPage.nextFrame()
+
+      await expect(breadcrumb).toBeHidden()
+    })
   })
 
   test.describe('DOM Widget Promotion', () => {

browser_tests/tests/subgraphLifecycle.spec.ts

@@ -0,0 +1,347 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import type { PromotedWidgetEntry } from '../helpers/promotedWidgets'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
+import {
+  getPromotedWidgets,
+  getPseudoPreviewWidgets,
+  getNonPreviewPromotedWidgets
+} from '../helpers/promotedWidgets'
+
+const domPreviewSelector = '.image-preview'
+
+const expectPromotedWidgetsToResolveToInteriorNodes = async (
+  comfyPage: ComfyPage,
+  hostSubgraphNodeId: string,
+  widgets: PromotedWidgetEntry[]
+) => {
+  const interiorNodeIds = widgets.map(([id]) => id)
+  const results = await comfyPage.page.evaluate(
+    ([hostId, ids]) => {
+      const graph = window.app!.graph!
+      const hostNode = graph.getNodeById(Number(hostId))
+      if (!hostNode?.isSubgraphNode()) return ids.map(() => false)
+
+      return ids.map((id) => {
+        const interiorNode = hostNode.subgraph.getNodeById(Number(id))
+        return interiorNode !== null && interiorNode !== undefined
+      })
+    },
+    [hostSubgraphNodeId, interiorNodeIds] as const
+  )
+
+  for (const exists of results) {
+    expect(exists).toBe(true)
+  }
+}
+
+test.describe(
+  'Subgraph Lifecycle Edge Behaviors',
+  { tag: ['@subgraph'] },
+  () => {
+    test.describe('Deterministic Hydrate from Serialized proxyWidgets', () => {
+      test('proxyWidgets entries map to real interior node IDs after load', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        const widgets = await getPromotedWidgets(comfyPage, '11')
+        expect(widgets.length).toBeGreaterThan(0)
+
+        for (const [interiorNodeId] of widgets) {
+          expect(Number(interiorNodeId)).toBeGreaterThan(0)
+        }
+
+        await expectPromotedWidgetsToResolveToInteriorNodes(
+          comfyPage,
+          '11',
+          widgets
+        )
+      })
+
+      test('proxyWidgets entries survive double round-trip without drift', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-multiple-promoted-widgets'
+        )
+        await comfyPage.nextFrame()
+
+        const initialWidgets = await getPromotedWidgets(comfyPage, '11')
+        expect(initialWidgets.length).toBeGreaterThan(0)
+        await expectPromotedWidgetsToResolveToInteriorNodes(
+          comfyPage,
+          '11',
+          initialWidgets
+        )
+
+        const serialized1 = await comfyPage.page.evaluate(() =>
+          window.app!.graph!.serialize()
+        )
+        await comfyPage.page.evaluate(
+          (workflow: ComfyWorkflowJSON) => window.app!.loadGraphData(workflow),
+          serialized1 as ComfyWorkflowJSON
+        )
+        await comfyPage.nextFrame()
+
+        const afterFirst = await getPromotedWidgets(comfyPage, '11')
+        await expectPromotedWidgetsToResolveToInteriorNodes(
+          comfyPage,
+          '11',
+          afterFirst
+        )
+
+        const serialized2 = await comfyPage.page.evaluate(() =>
+          window.app!.graph!.serialize()
+        )
+        await comfyPage.page.evaluate(
+          (workflow: ComfyWorkflowJSON) => window.app!.loadGraphData(workflow),
+          serialized2 as ComfyWorkflowJSON
+        )
+        await comfyPage.nextFrame()
+
+        const afterSecond = await getPromotedWidgets(comfyPage, '11')
+        await expectPromotedWidgetsToResolveToInteriorNodes(
+          comfyPage,
+          '11',
+          afterSecond
+        )
+
+        expect(afterFirst).toEqual(initialWidgets)
+        expect(afterSecond).toEqual(initialWidgets)
+      })
+
+      test('Compressed target_slot (-1) entries are hydrated to real IDs', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-compressed-target-slot'
+        )
+        await comfyPage.nextFrame()
+
+        const widgets = await getPromotedWidgets(comfyPage, '2')
+        expect(widgets.length).toBeGreaterThan(0)
+
+        for (const [interiorNodeId] of widgets) {
+          expect(interiorNodeId).not.toBe('-1')
+          expect(Number(interiorNodeId)).toBeGreaterThan(0)
+        }
+
+        await expectPromotedWidgetsToResolveToInteriorNodes(
+          comfyPage,
+          '2',
+          widgets
+        )
+      })
+    })
+
+    test.describe('Placeholder Behavior After Promoted Source Removal', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      })
+
+      test('Removing promoted source node inside subgraph falls back to disconnected placeholder on exterior', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        const initialWidgets = await getPromotedWidgets(comfyPage, '11')
+        expect(initialWidgets.length).toBeGreaterThan(0)
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
+
+        const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
+        await clipNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()
+
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        await expect
+          .poll(async () => {
+            return await comfyPage.page.evaluate(() => {
+              const hostNode = window.app!.canvas.graph!.getNodeById('11')
+              const proxyWidgets = hostNode?.properties?.proxyWidgets
+              return {
+                proxyWidgetCount: Array.isArray(proxyWidgets)
+                  ? proxyWidgets.length
+                  : 0,
+                firstWidgetType: hostNode?.widgets?.[0]?.type
+              }
+            })
+          })
+          .toEqual({
+            proxyWidgetCount: initialWidgets.length,
+            firstWidgetType: 'button'
+          })
+      })
+
+      test('Promoted widget disappears from DOM after interior node deletion', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        const textarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(textarea).toBeVisible()
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
+
+        const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
+        await clipNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()
+
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        await expect(
+          comfyPage.page.getByTestId(TestIds.widgets.domWidgetTextarea)
+        ).toHaveCount(0)
+      })
+    })
+
+    test.describe('Unpack/Remove Cleanup for Pseudo-Preview Targets', () => {
+      test('Pseudo-preview entries exist in proxyWidgets for preview subgraph', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+        await comfyPage.nextFrame()
+
+        const pseudoWidgets = await getPseudoPreviewWidgets(comfyPage, '5')
+        expect(pseudoWidgets.length).toBeGreaterThan(0)
+        expect(
+          pseudoWidgets.some(([, name]) => name === '$$canvas-image-preview')
+        ).toBe(true)
+      })
+
+      test('Non-preview widgets coexist with pseudo-preview entries', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+        await comfyPage.nextFrame()
+
+        const pseudoWidgets = await getPseudoPreviewWidgets(comfyPage, '5')
+        const nonPreviewWidgets = await getNonPreviewPromotedWidgets(
+          comfyPage,
+          '5'
+        )
+
+        expect(pseudoWidgets.length).toBeGreaterThan(0)
+        expect(nonPreviewWidgets.length).toBeGreaterThan(0)
+        expect(
+          nonPreviewWidgets.some(([, name]) => name === 'filename_prefix')
+        ).toBe(true)
+      })
+
+      test('Unpacking subgraph clears pseudo-preview entries from graph', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+        await comfyPage.nextFrame()
+
+        const beforePseudo = await getPseudoPreviewWidgets(comfyPage, '5')
+        expect(beforePseudo.length).toBeGreaterThan(0)
+
+        await comfyPage.page.evaluate(() => {
+          const graph = window.app!.graph!
+          const subgraphNode = graph.nodes.find((n) => n.isSubgraphNode())
+          if (!subgraphNode || !subgraphNode.isSubgraphNode()) return
+          graph.unpackSubgraph(subgraphNode)
+        })
+        await comfyPage.nextFrame()
+
+        const subgraphNodeCount = await comfyPage.page.evaluate(() => {
+          const graph = window.app!.graph!
+          return graph.nodes.filter((n) => n.isSubgraphNode()).length
+        })
+        expect(subgraphNodeCount).toBe(0)
+
+        await expect
+          .poll(async () => comfyPage.subgraph.countGraphPseudoPreviewEntries())
+          .toBe(0)
+      })
+
+      test('Removing subgraph node clears pseudo-preview DOM elements', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+        await comfyPage.nextFrame()
+
+        const beforePseudo = await getPseudoPreviewWidgets(comfyPage, '5')
+        expect(beforePseudo.length).toBeGreaterThan(0)
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
+        expect(await subgraphNode.exists()).toBe(true)
+
+        await subgraphNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()
+
+        const nodeExists = await comfyPage.page.evaluate(() => {
+          return !!window.app!.canvas.graph!.getNodeById('5')
+        })
+        expect(nodeExists).toBe(false)
+
+        await expect
+          .poll(async () => comfyPage.subgraph.countGraphPseudoPreviewEntries())
+          .toBe(0)
+        await expect(comfyPage.page.locator(domPreviewSelector)).toHaveCount(0)
+      })
+
+      test('Unpacking one subgraph does not clear sibling pseudo-preview entries', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-multiple-promoted-previews'
+        )
+        await comfyPage.nextFrame()
+
+        const firstNodeBefore = await getPseudoPreviewWidgets(comfyPage, '7')
+        const secondNodeBefore = await getPseudoPreviewWidgets(comfyPage, '8')
+
+        expect(firstNodeBefore.length).toBeGreaterThan(0)
+        expect(secondNodeBefore.length).toBeGreaterThan(0)
+
+        await comfyPage.page.evaluate(() => {
+          const graph = window.app!.graph!
+          const subgraphNode = graph.getNodeById('7')
+          if (!subgraphNode || !subgraphNode.isSubgraphNode()) return
+          graph.unpackSubgraph(subgraphNode)
+        })
+        await comfyPage.nextFrame()
+
+        const firstNodeExists = await comfyPage.page.evaluate(() => {
+          return !!window.app!.graph!.getNodeById('7')
+        })
+        expect(firstNodeExists).toBe(false)
+
+        const secondNodeAfter = await getPseudoPreviewWidgets(comfyPage, '8')
+        expect(secondNodeAfter).toEqual(secondNodeBefore)
+      })
+    })
+  }
+)

browser_tests/tests/subgraphNestedConfigureOrder.spec.ts

@@ -0,0 +1,110 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Nested subgraph configure order', { tag: ['@subgraph'] }, () => {
+  const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
+
+  test('Loads without "No link found" or "Failed to resolve legacy -1" console warnings', async ({
+    comfyPage
+  }) => {
+    const warnings: string[] = []
+    comfyPage.page.on('console', (msg) => {
+      const text = msg.text()
+      if (
+        text.includes('No link found') ||
+        text.includes('Failed to resolve legacy -1') ||
+        text.includes('No inner link found')
+      ) {
+        warnings.push(text)
+      }
+    })
+
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+    expect(warnings).toEqual([])
+  })
+
+  test('All three subgraph levels resolve promoted widgets', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+    await comfyPage.nextFrame()
+
+    const results = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.canvas.graph!
+      const allGraphs = [graph, ...graph.subgraphs.values()]
+
+      return allGraphs.flatMap((g) =>
+        g._nodes
+          .filter(
+            (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
+          )
+          .map((hostNode) => {
+            const proxyWidgets = Array.isArray(
+              hostNode.properties?.proxyWidgets
+            )
+              ? hostNode.properties.proxyWidgets
+              : []
+
+            const widgetEntries = proxyWidgets
+              .filter(
+                (e: unknown): e is [string, string] =>
+                  Array.isArray(e) &&
+                  e.length >= 2 &&
+                  typeof e[0] === 'string' &&
+                  typeof e[1] === 'string'
+              )
+              .map(([interiorNodeId, widgetName]: [string, string]) => {
+                const sg = hostNode.isSubgraphNode() ? hostNode.subgraph : null
+                const interiorNode = sg?.getNodeById(Number(interiorNodeId))
+                return {
+                  interiorNodeId,
+                  widgetName,
+                  resolved: interiorNode !== null && interiorNode !== undefined
+                }
+              })
+
+            return {
+              hostNodeId: String(hostNode.id),
+              widgetEntries
+            }
+          })
+      )
+    })
+
+    expect(
+      results.length,
+      'Should have subgraph host nodes at multiple nesting levels'
+    ).toBeGreaterThanOrEqual(2)
+
+    for (const { hostNodeId, widgetEntries } of results) {
+      expect(
+        widgetEntries.length,
+        `Host node ${hostNodeId} should have promoted widgets`
+      ).toBeGreaterThan(0)
+
+      for (const { interiorNodeId, widgetName, resolved } of widgetEntries) {
+        expect(interiorNodeId).not.toBe('-1')
+        expect(Number(interiorNodeId)).toBeGreaterThan(0)
+        expect(widgetName).toBeTruthy()
+        expect(
+          resolved,
+          `Widget "${widgetName}" (interior node ${interiorNodeId}) on host ${hostNodeId} should resolve`
+        ).toBe(true)
+      }
+    }
+  })
+
+  test('Prompt execution succeeds without 400 error', async ({ comfyPage }) => {
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+    await comfyPage.nextFrame()
+
+    const responsePromise = comfyPage.page.waitForResponse('**/api/prompt')
+
+    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
+
+    const response = await responsePromise
+    expect(response.status()).not.toBe(400)
+  })
+})

browser_tests/tests/subgraphNestedDuplicateWidgetNames.spec.ts

@@ -0,0 +1,141 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+const WORKFLOW = 'subgraphs/nested-duplicate-widget-names'
+const PROMOTED_BORDER_CLASS = 'ring-component-node-widget-promoted'
+
+/**
+ * Regression tests for nested subgraph promotion where multiple interior
+ * nodes share the same widget name (e.g. two CLIPTextEncode nodes both
+ * with a "text" widget).
+ *
+ * The inner subgraph (node 3) promotes both ["1","text"] and ["2","text"].
+ * The outer subgraph (node 4) promotes through node 3 using identity
+ * disambiguation (optional sourceNodeId in the promotion entry).
+ *
+ * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10123#discussion_r2956230977
+ */
+test.describe(
+  'Nested subgraph duplicate widget names',
+  { tag: ['@subgraph', '@widget'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    })
+
+    test('Inner subgraph node has both text widgets promoted', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.nextFrame()
+
+      const nonPreview = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph!
+        const outerNode = graph.getNodeById('4')
+        if (
+          !outerNode ||
+          typeof outerNode.isSubgraphNode !== 'function' ||
+          !outerNode.isSubgraphNode()
+        ) {
+          return []
+        }
+
+        const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
+        if (!innerSubgraphNode) return []
+
+        return ((innerSubgraphNode.properties?.proxyWidgets ?? []) as unknown[])
+          .filter(
+            (entry): entry is [string, string] =>
+              Array.isArray(entry) &&
+              entry.length >= 2 &&
+              typeof entry[0] === 'string' &&
+              typeof entry[1] === 'string' &&
+              !entry[1].startsWith('$$')
+          )
+          .map(
+            ([nodeId, widgetName]) => [nodeId, widgetName] as [string, string]
+          )
+      })
+
+      expect(nonPreview).toEqual([
+        ['1', 'text'],
+        ['2', 'text']
+      ])
+    })
+
+    test('Promoted widget values from both inner CLIPTextEncode nodes are distinguishable', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.nextFrame()
+
+      const widgetValues = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph!
+        const outerNode = graph.getNodeById('4')
+        if (
+          !outerNode ||
+          typeof outerNode.isSubgraphNode !== 'function' ||
+          !outerNode.isSubgraphNode()
+        ) {
+          return []
+        }
+
+        const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
+        if (!innerSubgraphNode) return []
+
+        return (innerSubgraphNode.widgets ?? []).map((w) => ({
+          name: w.name,
+          value: w.value
+        }))
+      })
+
+      const textWidgets = widgetValues.filter((w) => w.name.startsWith('text'))
+      expect(textWidgets).toHaveLength(2)
+
+      const values = textWidgets.map((w) => w.value)
+      expect(values).toContain('11111111111')
+      expect(values).toContain('22222222222')
+    })
+
+    test.describe('Promoted border styling in Vue mode', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      })
+
+      test('Intermediate subgraph widgets get promoted border, outermost does not', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
+
+        // Node 4 is the outer SubgraphNode at root level.
+        // Its widgets are not promoted further (no parent subgraph),
+        // so none of its widget wrappers should carry the promoted ring.
+        const outerNode = comfyPage.vueNodes.getNodeLocator('4')
+        await expect(outerNode).toBeVisible()
+
+        const outerPromotedRings = outerNode.locator(
+          `.${PROMOTED_BORDER_CLASS}`
+        )
+        await expect(outerPromotedRings).toHaveCount(0)
+
+        // Navigate into the outer subgraph (node 4) to reach node 3
+        await comfyPage.vueNodes.enterSubgraph('4')
+        await comfyPage.nextFrame()
+        await comfyPage.vueNodes.waitForNodes()
+
+        // Node 3 is the intermediate SubgraphNode whose "text" widgets
+        // are promoted up to the outer subgraph (node 4).
+        // Its widget wrappers should carry the promoted border ring.
+        const intermediateNode = comfyPage.vueNodes.getNodeLocator('3')
+        await expect(intermediateNode).toBeVisible()
+
+        const intermediatePromotedRings = intermediateNode.locator(
+          `.${PROMOTED_BORDER_CLASS}`
+        )
+        await expect(intermediatePromotedRings).toHaveCount(1)
+      })
+    })
+  }
+)

browser_tests/tests/subgraphProgressClear.spec.ts

@@ -0,0 +1,131 @@
+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 })
+    })
+
+    test('Stale progress is cleared when switching workflows while inside subgraph', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      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()
+
+      await comfyPage.page.evaluate((nodeId) => {
+        const node = window.app!.canvas.graph!.getNodeById(nodeId)!
+        node.progress = 0.7
+      }, subgraphNodeId!)
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById(
+        subgraphNodeId!
+      )
+      await subgraphNode.navigateIntoSubgraph()
+
+      const inSubgraph = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        return !!graph && 'inputNode' in graph
+      })
+      expect(inSubgraph).toBe(true)
+
+      await comfyPage.workflow.loadWorkflow('default')
+      await comfyPage.nextFrame()
+
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      await expect(async () => {
+        const subgraphProgressState = await comfyPage.page.evaluate(() => {
+          const graph = window.app!.canvas.graph!
+          const subgraphNode = graph.nodes.find(
+            (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
+          )
+          if (!subgraphNode) {
+            return { exists: false, progress: null }
+          }
+
+          return { exists: true, progress: subgraphNode.progress }
+        })
+        expect(subgraphProgressState.exists).toBe(true)
+        expect(subgraphProgressState.progress).toBeUndefined()
+      }).toPass({ timeout: 5_000 })
+    })
+  }
+)

browser_tests/tests/subgraphPromotion.spec.ts

@@ -2,7 +2,6 @@ import { expect } from '@playwright/test'
 
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import { TestIds } from '../fixtures/selectors'
 import { fitToViewInstant } from '../helpers/fitToView'
@@ -12,26 +11,6 @@ import {
   getPromotedWidgets
 } from '../helpers/promotedWidgets'
 
-/**
- * Check whether we're currently in a subgraph.
- */
-async function isInSubgraph(comfyPage: ComfyPage): Promise<boolean> {
-  return comfyPage.page.evaluate(() => {
-    const graph = window.app!.canvas.graph
-    return !!graph && 'inputNode' in graph
-  })
-}
-
-async function exitSubgraphViaBreadcrumb(comfyPage: ComfyPage): Promise<void> {
-  const breadcrumb = comfyPage.page.getByTestId(TestIds.breadcrumb.subgraph)
-  await breadcrumb.waitFor({ state: 'visible', timeout: 5000 })
-
-  const parentLink = breadcrumb.getByRole('link').first()
-  await expect(parentLink).toBeVisible()
-  await parentLink.click()
-  await comfyPage.nextFrame()
-}
-
 test.describe(
   'Subgraph Widget Promotion',
   { tag: ['@subgraph', '@widget'] },
@@ -179,7 +158,7 @@ test.describe(
         await comfyPage.vueNodes.enterSubgraph('11')
         await comfyPage.nextFrame()
 
-        expect(await isInSubgraph(comfyPage)).toBe(true)
+        expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
       })
 
       test('Multiple promoted widgets render on SubgraphNode in Vue mode', async ({
@@ -251,7 +230,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent graph
-        await exitSubgraphViaBreadcrumb(comfyPage)
+        await comfyPage.subgraph.exitViaBreadcrumb()
 
         // Promoted textarea on SubgraphNode should have the same value
         const promotedTextarea = comfyPage.page.getByTestId(
@@ -285,7 +264,7 @@ test.describe(
           )
           await expect(interiorTextarea).toHaveValue(testContent)
 
-          await exitSubgraphViaBreadcrumb(comfyPage)
+          await comfyPage.subgraph.exitViaBreadcrumb()
 
           const promotedTextarea = comfyPage.page.getByTestId(
             TestIds.widgets.domWidgetTextarea
@@ -331,7 +310,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent
-        await exitSubgraphViaBreadcrumb(comfyPage)
+        await comfyPage.subgraph.exitViaBreadcrumb()
 
         // SubgraphNode should now have the promoted widget
         const widgetCount = await getPromotedWidgetCount(comfyPage, '2')
@@ -366,7 +345,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back and verify promotion took effect
-        await exitSubgraphViaBreadcrumb(comfyPage)
+        await comfyPage.subgraph.exitViaBreadcrumb()
         await fitToViewInstant(comfyPage)
         await comfyPage.nextFrame()
 
@@ -397,7 +376,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent
-        await exitSubgraphViaBreadcrumb(comfyPage)
+        await comfyPage.subgraph.exitViaBreadcrumb()
 
         // SubgraphNode should have fewer widgets
         const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
@@ -492,6 +471,30 @@ test.describe(
         expect(widgetCount).toBeGreaterThan(0)
       })
 
+      test('Multi-link input representative stays stable through save/reload', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-multiple-promoted-widgets'
+        )
+        await comfyPage.nextFrame()
+
+        const beforeSnapshot = await getPromotedWidgets(comfyPage, '11')
+        expect(beforeSnapshot.length).toBeGreaterThan(0)
+
+        const serialized = await comfyPage.page.evaluate(() => {
+          return window.app!.graph!.serialize()
+        })
+
+        await comfyPage.page.evaluate((workflow: ComfyWorkflowJSON) => {
+          return window.app!.loadGraphData(workflow)
+        }, serialized as ComfyWorkflowJSON)
+        await comfyPage.nextFrame()
+
+        const afterSnapshot = await getPromotedWidgets(comfyPage, '11')
+        expect(afterSnapshot).toEqual(beforeSnapshot)
+      })
+
       test('Cloning a subgraph node keeps promoted widget entries on original and clone', async ({
         comfyPage
       }) => {
@@ -649,6 +652,44 @@ test.describe(
         expect(nodeExists).toBe(false)
       })
 
+      test('Nested promoted widget entries reflect interior changes after slot removal', async ({
+        comfyPage
+      }) => {
+        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+        await comfyPage.nextFrame()
+
+        const initialNames = await getPromotedWidgetNames(comfyPage, '5')
+        expect(initialNames.length).toBeGreaterThan(0)
+
+        const outerSubgraph = await comfyPage.nodeOps.getNodeRefById('5')
+        await outerSubgraph.navigateIntoSubgraph()
+
+        const removedSlotName = await comfyPage.page.evaluate(() => {
+          const graph = window.app!.canvas.graph
+          if (!graph || !('inputNode' in graph)) return null
+          return graph.inputs?.[0]?.name ?? null
+        })
+        expect(removedSlotName).not.toBeNull()
+
+        await comfyPage.subgraph.rightClickInputSlot()
+        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
+        await comfyPage.nextFrame()
+
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        const finalNames = await getPromotedWidgetNames(comfyPage, '5')
+        const expectedNames = [...initialNames]
+        const removedIndex = expectedNames.indexOf(removedSlotName!)
+        expect(removedIndex).toBeGreaterThanOrEqual(0)
+        expectedNames.splice(removedIndex, 1)
+
+        expect(finalNames).toEqual(expectedNames)
+      })
+
       test('Removing I/O slot removes associated promoted widget', async ({
         comfyPage
       }) => {
@@ -671,15 +712,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back via breadcrumb
-        await comfyPage.page
-          .getByTestId(TestIds.breadcrumb.subgraph)
-          .waitFor({ state: 'visible', timeout: 5000 })
-        const homeBreadcrumb = comfyPage.page.getByRole('link', {
-          name: 'subgraph-with-promoted-text-widget'
-        })
-        await homeBreadcrumb.waitFor({ state: 'visible' })
-        await homeBreadcrumb.click()
-        await comfyPage.nextFrame()
+        await comfyPage.subgraph.exitViaBreadcrumb()
 
         // Widget count should be reduced
         const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '11')

browser_tests/tests/vueNodes/groups/groups.spec.ts

@@ -2,9 +2,116 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
+import type { ComfyPage } from '../../../fixtures/ComfyPage'
 
 const CREATE_GROUP_HOTKEY = 'Control+g'
 
+type NodeGroupCenteringError = {
+  horizontal: number
+  vertical: number
+}
+
+type NodeGroupCenteringErrors = {
+  innerGroup: NodeGroupCenteringError
+  outerGroup: NodeGroupCenteringError
+}
+
+const LEGACY_VUE_CENTERING_BASELINE: NodeGroupCenteringErrors = {
+  innerGroup: {
+    horizontal: 16.308832840862777,
+    vertical: 17.390899314547084
+  },
+  outerGroup: {
+    horizontal: 20.30164329441476,
+    vertical: 42.196324096481476
+  }
+} as const
+
+const CENTERING_TOLERANCE = {
+  innerGroup: 6,
+  outerGroup: 12
+} as const
+
+function expectWithinBaseline(
+  actual: number,
+  baseline: number,
+  tolerance: number
+) {
+  expect(Math.abs(actual - baseline)).toBeLessThan(tolerance)
+}
+
+async function getNodeGroupCenteringErrors(
+  comfyPage: ComfyPage
+): Promise<NodeGroupCenteringErrors> {
+  return comfyPage.page.evaluate(() => {
+    type GraphNode = {
+      id: number | string
+      pos: ReadonlyArray<number>
+    }
+    type GraphGroup = {
+      title: string
+      pos: ReadonlyArray<number>
+      size: ReadonlyArray<number>
+    }
+
+    const app = window.app!
+    const node = app.graph.nodes[0] as GraphNode | undefined
+
+    if (!node) {
+      throw new Error('Expected a node in the loaded workflow')
+    }
+
+    const nodeElement = document.querySelector<HTMLElement>(
+      `[data-node-id="${node.id}"]`
+    )
+
+    if (!nodeElement) {
+      throw new Error(`Vue node element not found for node ${node.id}`)
+    }
+
+    const groups = app.graph.groups as GraphGroup[]
+    const innerGroup = groups.find((group) => group.title === 'Inner Group')
+    const outerGroup = groups.find((group) => group.title === 'Outer Group')
+
+    if (!innerGroup || !outerGroup) {
+      throw new Error('Expected both Inner Group and Outer Group in graph')
+    }
+
+    const nodeRect = nodeElement.getBoundingClientRect()
+
+    const getCenteringError = (group: GraphGroup): NodeGroupCenteringError => {
+      const [groupStartX, groupStartY] = app.canvasPosToClientPos([
+        group.pos[0],
+        group.pos[1]
+      ])
+      const [groupEndX, groupEndY] = app.canvasPosToClientPos([
+        group.pos[0] + group.size[0],
+        group.pos[1] + group.size[1]
+      ])
+
+      const groupLeft = Math.min(groupStartX, groupEndX)
+      const groupRight = Math.max(groupStartX, groupEndX)
+      const groupTop = Math.min(groupStartY, groupEndY)
+      const groupBottom = Math.max(groupStartY, groupEndY)
+
+      const leftGap = nodeRect.left - groupLeft
+      const rightGap = groupRight - nodeRect.right
+      const topGap = nodeRect.top - groupTop
+      const bottomGap = groupBottom - nodeRect.bottom
+
+      return {
+        horizontal: Math.abs(leftGap - rightGap),
+        vertical: Math.abs(topGap - bottomGap)
+      }
+    }
+
+    return {
+      innerGroup: getCenteringError(innerGroup),
+      outerGroup: getCenteringError(outerGroup)
+    }
+  })
+}
+
 test.describe('Vue Node Groups', { tag: '@screenshot' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
@@ -74,4 +181,45 @@ test.describe('Vue Node Groups', { tag: '@screenshot' }, () => {
       expect(finalOffsetY).toBeCloseTo(initialOffsetY, 0)
     }).toPass({ timeout: 5000 })
   })
+
+  test('should keep groups aligned after loading legacy Vue workflows', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('groups/nested-groups-1-inner-node')
+    await comfyPage.vueNodes.waitForNodes(1)
+
+    const workflowRendererVersion = await comfyPage.page.evaluate(() => {
+      const extra = window.app!.graph.extra as
+        | { workflowRendererVersion?: string }
+        | undefined
+      return extra?.workflowRendererVersion
+    })
+
+    expect(workflowRendererVersion).toMatch(/^Vue/)
+
+    await expect(async () => {
+      const centeringErrors = await getNodeGroupCenteringErrors(comfyPage)
+
+      expectWithinBaseline(
+        centeringErrors.innerGroup.horizontal,
+        LEGACY_VUE_CENTERING_BASELINE.innerGroup.horizontal,
+        CENTERING_TOLERANCE.innerGroup
+      )
+      expectWithinBaseline(
+        centeringErrors.innerGroup.vertical,
+        LEGACY_VUE_CENTERING_BASELINE.innerGroup.vertical,
+        CENTERING_TOLERANCE.innerGroup
+      )
+      expectWithinBaseline(
+        centeringErrors.outerGroup.horizontal,
+        LEGACY_VUE_CENTERING_BASELINE.outerGroup.horizontal,
+        CENTERING_TOLERANCE.outerGroup
+      )
+      expectWithinBaseline(
+        centeringErrors.outerGroup.vertical,
+        LEGACY_VUE_CENTERING_BASELINE.outerGroup.vertical,
+        CENTERING_TOLERANCE.outerGroup
+      )
+    }).toPass({ timeout: 5000 })
+  })
 })

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

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

docs/architecture/change-tracker.md

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

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

eslint.config.ts

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

global.d.ts

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

knip.config.ts

@@ -20,10 +20,6 @@ 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}']
     }
@@ -36,9 +32,7 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons',
-    // Used by lucideStrokePlugin.js (CSS @plugin)
-    '@iconify/utils'
+    '@primevue/icons'
   ],
   ignore: [
     // Auto generated manager types
@@ -53,9 +47,7 @@ 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',
-    // Loaded via @plugin directive in CSS, not detected by knip
-    'packages/design-system/src/css/lucideStrokePlugin.js'
+    '.agents/checks/eslint.strict.config.js'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

package.json

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

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

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

packages/design-system/src/icons/canny-to-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 18L19.9427 15.9426C19.6926 15.6927 19.3536 15.5522 19 15.5522C18.6464 15.5522 18.3074 15.6927 18.0573 15.9426L12 22M10 17V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17M12 13.9666C12 12.9057 11.5786 11.8883 10.8284 11.1381C10.0783 10.388 9.06087 9.96655 8 9.96655C6.93913 9.96655 5.92172 10.388 5.17157 11.1381C4.42143 11.8883 4 12.9057 4 13.9666M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18M9.41415 8.04751C10.1952 7.26647 10.1952 6.00014 9.41415 5.21909C8.6331 4.43804 7.36677 4.43804 6.58572 5.21909C5.80467 6.00014 5.80467 7.26647 6.58572 8.04751C7.36677 8.82856 8.6331 8.82856 9.41415 8.04751ZM3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/canny-to-video.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H18M14 17V18.6667L18 16L16.6579 15.1053M12 13.9666C12 12.9057 11.5786 11.8883 10.8284 11.1381C10.0783 10.388 9.06087 9.96655 8 9.96655C6.93913 9.96655 5.92172 10.388 5.17157 11.1381C4.42143 11.8883 4 12.9057 4 13.9666M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18M9.41415 8.04751C10.1952 7.26647 10.1952 6.00014 9.41415 5.21909C8.6331 4.43804 7.36677 4.43804 6.58572 5.21909C5.80467 6.00014 5.80467 7.26647 6.58572 8.04751C7.36677 8.82856 8.6331 8.82856 9.41415 8.04751ZM3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/depth-to-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 18L19.9427 15.9426C19.6926 15.6927 19.3536 15.5522 19 15.5522C18.6464 15.5522 18.3074 15.6927 18.0573 15.9426L12 22M10 17V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17M2.29912 4.63977C2.11384 4.8332 2 5.09561 2 5.38461V12.9231C2 13.5178 2.48215 14 3.07692 14H10.6154C10.8974 14 11.1541 13.8916 11.3461 13.7141M2.29912 4.63977C2.49515 4.43512 2.77116 4.30769 3.07692 4.30769H10.6154C10.9061 4.30769 11.1524 4.46662 11.3461 4.65384M2.29912 4.63977L4.59359 2.34615C4.79033 2.13329 5.07191 2 5.38463 2H12.9231C13.2201 2 13.4891 2.12025 13.6839 2.31473M11.3461 13.7141C11.559 13.5174 11.6923 13.2358 11.6923 12.9231V5.38461C11.6923 5.08055 11.5488 4.84967 11.3461 4.65384M11.3461 13.7141L13.6538 11.4064C13.8667 11.2097 14 10.9281 14 10.6154V3.07692C14 2.77918 13.8792 2.50967 13.6839 2.31473M11.3461 4.65384L13.6839 2.31473M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/depth-to-video.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 10H20.6667C21.403 10 22 10.597 22 11.3333V20.6667C22 21.403 21.403 22 20.6667 22H11.3333C10.597 22 10 21.403 10 20.6667V17M14 15.5V18.6667L18 16L15 14M2.29912 4.63977C2.11384 4.8332 2 5.09561 2 5.38461V12.9231C2 13.5178 2.48215 14 3.07692 14H10.6154C10.8974 14 11.1541 13.8916 11.3461 13.7141M2.29912 4.63977C2.49515 4.43512 2.77116 4.30769 3.07692 4.30769H10.6154C10.9061 4.30769 11.1524 4.46662 11.3461 4.65384M2.29912 4.63977L4.59359 2.34615C4.79033 2.13329 5.07191 2 5.38463 2H12.9231C13.2201 2 13.4891 2.12025 13.6839 2.31473M11.3461 13.7141C11.559 13.5174 11.6923 13.2358 11.6923 12.9231V5.38461C11.6923 5.08055 11.5488 4.84967 11.3461 4.65384M11.3461 13.7141L13.6538 11.4064C13.8667 11.2097 14 10.9281 14 10.6154V3.07692C14 2.77918 13.8792 2.50967 13.6839 2.31473M11.3461 4.65384L13.6839 2.31473M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

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

packages/design-system/src/icons/i-tools-compare-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 19C3 20.1046 3.79594 21 4.77778 21H11V3H4.77778C3.79594 3 3 3.89543 3 5M3 19V5M3 19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3M11 1L11 23M21 15L17.9 11.9C17.5237 11.5312 17.017 11.3258 16.4901 11.3284C15.9632 11.331 15.4586 11.5415 15.086 11.914L14 13M11 16L6 21M14 3H19.1538C20.1734 3 21 3.89543 21 5V19C21 20.1046 20.1734 21 19.1538 21H14V3ZM11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/i-tools-preview-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 14.9999L17.914 11.9139C17.5389 11.539 17.0303 11.3284 16.5 11.3284C15.9697 11.3284 15.4611 11.539 15.086 11.9139L12.6935 14.3064M14.5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5C3.89543 3 3 3.89543 3 5V13M11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9ZM2.03125 18.6735C1.98958 18.5613 1.98958 18.4378 2.03125 18.3255C2.43708 17.3415 3.12595 16.5001 4.01054 15.9081C4.89512 15.3161 5.93558 15 7 15C8.06442 15 9.10488 15.3161 9.98946 15.9081C10.874 16.5001 11.5629 17.3415 11.9687 18.3255C12.0104 18.4378 12.0104 18.5613 11.9687 18.6735C11.5629 19.6575 10.874 20.4989 9.98946 21.0909C9.10488 21.683 8.06442 21.999 7 21.999C5.93558 21.999 4.89512 21.683 4.01054 21.0909C3.12595 20.4989 2.43708 19.6575 2.03125 18.6735ZM8.49992 18.4995C8.49992 19.3278 7.82838 19.9994 6.99999 19.9994C6.17161 19.9994 5.50007 19.3278 5.50007 18.4995C5.50007 17.6711 6.17161 16.9995 6.99999 16.9995C7.82838 16.9995 8.49992 17.6711 8.49992 18.4995Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/image-edit.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 21H5M5 21C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V9M5 21L14.086 11.914C14.4586 11.5415 14.9632 11.331 15.4901 11.3284M18.5 13.7503L20.5 15.7503M11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9ZM21.5871 14.6562C21.8514 14.3919 22 14.0334 22 13.6596C22 13.2858 21.8516 12.9273 21.5873 12.6629C21.323 12.3986 20.9645 12.25 20.5907 12.25C20.2169 12.25 19.8584 12.3984 19.594 12.6627L12.921 19.3373C12.8049 19.453 12.719 19.5955 12.671 19.7523L12.0105 21.9283C11.9975 21.9715 11.9966 22.0175 12.0076 22.0612C12.0187 22.105 12.0414 22.1449 12.0734 22.1768C12.1053 22.2087 12.1453 22.2313 12.189 22.2423C12.2328 22.2533 12.2787 22.2523 12.322 22.2393L14.4985 21.5793C14.6551 21.5317 14.7976 21.4463 14.9135 21.3308L21.5871 14.6562Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/image-inpainting.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 21H5M5 21C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V9.5M5 21L14.086 11.914C14.4586 11.5415 14.9632 11.331 15.4901 11.3284M18.3109 20.2074L12.9705 18.7508M15.4997 15.2586C14.5976 16.6137 13.5146 16.9887 12.208 17.2328C12.1646 17.2407 12.1241 17.2597 12.0904 17.2881C12.0567 17.3164 12.0309 17.3531 12.0157 17.3944C12.0004 17.4358 11.9962 17.4804 12.0035 17.5238C12.0107 17.5673 12.0291 17.6081 12.057 17.6423L15.7172 22.0841C15.7916 22.163 15.8896 22.2157 15.9964 22.2341C16.1033 22.2525 16.2133 22.2356 16.3098 22.1861C17.3673 21.4615 18.9999 19.6549 18.9999 18.7589M11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9ZM20.188 12.5694C20.2866 12.4709 20.4036 12.3927 20.5324 12.3393C20.6611 12.286 20.7992 12.2585 20.9386 12.2585C21.078 12.2585 21.216 12.286 21.3448 12.3393C21.4735 12.3927 21.5905 12.4709 21.6891 12.5694C21.7877 12.668 21.8659 12.785 21.9192 12.9138C21.9725 13.0426 22 13.1806 22 13.32C22 13.4594 21.9725 13.5974 21.9192 13.7262C21.8659 13.855 21.7877 13.972 21.6891 14.0705L19.68 16.0802C19.6331 16.1271 19.6068 16.1906 19.6068 16.2569C19.6068 16.3232 19.6331 16.3868 19.68 16.4337L20.152 16.9057C20.378 17.1317 20.5049 17.4382 20.5049 17.7578C20.5049 18.0774 20.378 18.3838 20.152 18.6098L19.68 19.0819C19.6331 19.1287 19.5695 19.1551 19.5032 19.1551C19.4369 19.1551 19.3733 19.1287 19.3265 19.0819L15.1767 14.9326C15.1298 14.8857 15.1035 14.8221 15.1035 14.7558C15.1035 14.6895 15.1298 14.626 15.1767 14.5791L15.6487 14.107C15.8747 13.8811 16.1812 13.7541 16.5008 13.7541C16.8203 13.7541 17.1268 13.8811 17.3528 14.107L17.8249 14.5791C17.8717 14.6259 17.9353 14.6523 18.0016 14.6523C18.0679 14.6523 18.1315 14.6259 18.1784 14.5791L20.188 12.5694Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/image-outpainting.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 15H4.33333C3.59695 15 3 14.403 3 13.6667V4.33333C3 3.59695 3.59695 3 4.33333 3H13.6667C14.403 3 15 3.59695 15 4.33333V11L12.9427 8.94263C12.6926 8.69267 12.3536 8.55225 12 8.55225C11.6464 8.55225 11.3074 8.69267 11.0573 8.94263L5 15M18.3109 20.2074L12.9705 18.7508M15.4997 15.2586C14.5976 16.6137 13.5146 16.9887 12.208 17.2328C12.1646 17.2407 12.1241 17.2597 12.0904 17.2881C12.0567 17.3164 12.0309 17.3531 12.0157 17.3944C12.0004 17.4358 11.9962 17.4804 12.0035 17.5238C12.0107 17.5673 12.0291 17.6081 12.057 17.6423L15.7172 22.0841C15.7916 22.163 15.8896 22.2157 15.9964 22.2341C16.1033 22.2525 16.2133 22.2356 16.3098 22.1861C17.3673 21.4615 18.9999 19.6549 18.9999 18.7589M18 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V9M10 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V18M8.33333 7C8.33333 7.73638 7.73638 8.33333 7 8.33333C6.26362 8.33333 5.66667 7.73638 5.66667 7C5.66667 6.26362 6.26362 5.66667 7 5.66667C7.73638 5.66667 8.33333 6.26362 8.33333 7ZM20.188 12.5694C20.2866 12.4709 20.4036 12.3927 20.5324 12.3393C20.6611 12.286 20.7992 12.2585 20.9386 12.2585C21.078 12.2585 21.216 12.286 21.3448 12.3393C21.4735 12.3927 21.5905 12.4709 21.6891 12.5694C21.7877 12.668 21.8659 12.785 21.9192 12.9138C21.9725 13.0426 22 13.1806 22 13.32C22 13.4594 21.9725 13.5974 21.9192 13.7262C21.8659 13.855 21.7877 13.972 21.6891 14.0705L19.68 16.0802C19.6331 16.1271 19.6068 16.1906 19.6068 16.2569C19.6068 16.3232 19.6331 16.3868 19.68 16.4337L20.152 16.9057C20.378 17.1317 20.5049 17.4382 20.5049 17.7578C20.5049 18.0774 20.378 18.3838 20.152 18.6098L19.68 19.0819C19.6331 19.1287 19.5695 19.1551 19.5032 19.1551C19.4369 19.1551 19.3733 19.1287 19.3265 19.0819L15.1767 14.9326C15.1298 14.8857 15.1035 14.8221 15.1035 14.7558C15.1035 14.6895 15.1298 14.626 15.1767 14.5791L15.6487 14.107C15.8747 13.8811 16.1812 13.7541 16.5008 13.7541C16.8203 13.7541 17.1268 13.8811 17.3528 14.107L17.8249 14.5791C17.8717 14.6259 17.9353 14.6523 18.0016 14.6523C18.0679 14.6523 18.1315 14.6259 18.1784 14.5791L20.188 12.5694Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/image-to-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 18L19.9427 15.9426C19.6926 15.6927 19.3536 15.5522 19 15.5522C18.6464 15.5522 18.3074 15.6927 18.0573 15.9426L12 22M10 17V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17M14 9.96651L11.9427 7.90918C11.6926 7.65922 11.3536 7.5188 11 7.5188C10.6464 7.5188 10.3074 7.65922 10.0573 7.90918L4 13.9665M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18M3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655ZM7.33333 5.96655C7.33333 6.70293 6.73638 7.29989 6 7.29989C5.26362 7.29989 4.66667 6.70293 4.66667 5.96655C4.66667 5.23017 5.26362 4.63322 6 4.63322C6.73638 4.63322 7.33333 5.23017 7.33333 5.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/image-to-video.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 17.9999V20.6666C10 21.403 10.597 21.9999 11.3333 21.9999H20.6667C21.403 21.9999 22 21.403 22 20.6666V11.3333C22 10.5969 21.403 9.99994 20.6667 9.99994H18M14 16.9999V18.6666L18 15.9999L16.6579 15.1052M14 9.96651L11.9427 7.90918C11.6926 7.65922 11.3536 7.5188 11 7.5188C10.6464 7.5188 10.3074 7.65922 10.0573 7.90918L4 13.9665M5 21.9999L7 19.9999M7 19.9999H4C3.46957 19.9999 2.96086 19.7892 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 17.9999V16.9999M7 19.9999L5 17.9999M3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655ZM7.33333 5.96655C7.33333 6.70293 6.73638 7.29989 6 7.29989C5.26362 7.29989 4.66667 6.70293 4.66667 5.96655C4.66667 5.23017 5.26362 4.63322 6 4.63322C6.73638 4.63322 7.33333 5.23017 7.33333 5.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/pose-to-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 18L19.9427 15.9426C19.6926 15.6927 19.3536 15.5522 19 15.5522C18.6464 15.5522 18.3074 15.6927 18.0573 15.9426L12 22M10 17V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17M8 4.63322L8.87155 4.08134C8.95314 4.02967 9.05313 4.01593 9.14563 4.04367L10 4.29989M8 4.63322L7.12845 4.08134C7.04686 4.02967 6.94687 4.01593 6.85437 4.04367L6 4.29989M8 4.63322V6.63322M8 8.96655L6.74997 9.90408C6.69573 9.94476 6.65518 10.001 6.63374 10.0653L6 11.9666M8 8.96655L9.25003 9.90408C9.30427 9.94476 9.34482 10.001 9.36626 10.0653L10 11.9666M8 8.96655V6.63322M8 6.63322H9.86193C9.95033 6.63322 10.0351 6.66834 10.0976 6.73085L10.9489 7.58216C10.9826 7.61581 11.0086 7.65627 11.0254 7.70083L11.5 8.96655M8 6.63322H6.13807C6.04967 6.63322 5.96488 6.66834 5.90237 6.73085L5.05205 7.58117C5.01776 7.61546 4.99137 7.65681 4.97471 7.70235L4.5 9M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18M3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/pose-to-video.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H18M14 17V18.6667L18 16L16.6579 15.1053M8 4.63322L8.87155 4.08134C8.95314 4.02967 9.05313 4.01593 9.14563 4.04367L10 4.29989M8 4.63322L7.12845 4.08134C7.04686 4.02967 6.94687 4.01593 6.85437 4.04367L6 4.29989M8 4.63322V6.63322M8 8.96655L6.74997 9.90408C6.69573 9.94476 6.65518 10.001 6.63374 10.0653L6 11.9666M8 8.96655L9.25003 9.90408C9.30427 9.94476 9.34482 10.001 9.36626 10.0653L10 11.9666M8 8.96655V6.63322M8 6.63322H9.86193C9.95033 6.63322 10.0351 6.66834 10.0976 6.73085L10.9489 7.58216C10.9826 7.61581 11.0086 7.65627 11.0254 7.70083L11.5 8.96655M8 6.63322H6.13807C6.04967 6.63322 5.96488 6.66834 5.90237 6.73085L5.05205 7.58117C5.01776 7.61546 4.99137 7.65681 4.97471 7.70235L4.5 9M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18M3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

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

packages/design-system/src/icons/subgraph-blueprint-pose-to-video-ltx-2-0.svg

@@ -1,5 +0,0 @@
-<svg width="49" height="24" viewBox="0 0 49 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5243 11.7208C26.7584 11.955 26.7583 12.3351 26.5243 12.5694L23.9794 15.1153C23.7452 15.3495 23.3651 15.3493 23.1308 15.1153C22.8965 14.881 22.8965 14.501 23.1308 14.2667L24.6474 12.7501L17.0995 12.7501C16.7683 12.7499 16.4999 12.4807 16.4999 12.1495C16.5001 11.8184 16.7685 11.5501 17.0995 11.5499L24.6571 11.5499L23.1308 10.0235C22.8965 9.7892 22.8965 9.40919 23.1308 9.17489C23.3651 8.94127 23.7453 8.94083 23.9794 9.17489L26.5243 11.7208Z" fill="#8A8A8A"/>
-<path d="M4.50779 3.61371C4.6735 3.55748 4.85537 3.56703 5.0156 3.64203L6.14353 4.16938L6.9199 3.685L6.99509 3.64496C7.17632 3.56122 7.38691 3.56099 7.57029 3.64692L8.95798 4.29633C9.2306 4.42419 9.34839 4.74924 9.22068 5.02192C9.09287 5.29443 8.76771 5.4121 8.49509 5.28461L7.30857 4.72797L6.5449 5.20551V6.97211H9.32127C9.55299 6.97221 9.76687 7.08954 9.89158 7.27973L9.93943 7.36567L11.2588 10.1918C11.2714 10.2189 11.282 10.2474 11.291 10.2758L11.3125 10.3627L11.9902 14.2407C12.042 14.5373 11.8435 14.8206 11.5469 14.8725C11.2505 14.924 10.9681 14.7254 10.916 14.4291L10.247 10.6049L9.06052 8.06293H6.5449V11.6079C6.54489 11.6553 6.53579 11.7007 6.52439 11.7446H7.03318C7.26977 11.7446 7.48688 11.8665 7.61033 12.0629L7.6572 12.1518L8.89548 14.9711C8.9258 15.0402 8.94492 15.1138 8.95115 15.1889L9.26951 19.0629C9.29388 19.3627 9.07125 19.6259 8.77146 19.6508C8.47137 19.6755 8.20837 19.4519 8.18357 19.1518L7.86912 15.3471L6.7656 12.8344H5.52048L4.12693 15.3715L3.81541 19.1518C3.79062 19.4519 3.52762 19.6755 3.22752 19.6508C2.92759 19.626 2.70508 19.3628 2.72947 19.0629L3.04685 15.1957L3.05662 15.1245C3.06994 15.0542 3.09436 14.9862 3.12888 14.9233L4.68064 12.0981L4.73045 12.02C4.85779 11.8482 5.05991 11.7448 5.27732 11.7446H5.47361C5.46224 11.7007 5.45409 11.6553 5.45408 11.6079V8.06293H3.24412L1.74509 10.6323L1.08103 14.1127C1.02439 14.4084 0.738116 14.6018 0.44236 14.5454C0.146978 14.4885 -0.0465728 14.2032 0.00974259 13.9077L0.687477 10.3598L0.718727 10.2485C0.732186 10.2126 0.748186 10.1772 0.767555 10.144L2.42088 7.31C2.54303 7.10073 2.76744 6.97221 3.00974 6.97211H5.45408V5.05121L4.72654 4.71039L3.50388 5.28461C3.23123 5.41225 2.90614 5.2945 2.7783 5.02192C2.65052 4.74922 2.76835 4.4242 3.04099 4.29633L4.43748 3.64203L4.50779 3.61371Z" fill="#8A8A8A"/>
-<path d="M44.7027 5C46.7971 5 48.5097 6.71671 48.5097 8.84956V14.3804C48.5097 16.5133 46.7971 18.23 44.7027 18.23H35.3067C33.2122 18.23 31.4997 16.5133 31.4997 14.3804V8.84956C31.4997 6.71671 33.2122 5 35.3067 5H44.7027ZM35.3067 6.37812C33.9312 6.37812 32.8496 7.48086 32.8496 8.84956V14.3804C32.8496 15.7491 33.9312 16.8519 35.3067 16.8519H44.7027C46.0781 16.8519 47.1597 15.7491 47.1597 14.3804V8.84956C47.1597 7.48086 46.0781 6.37812 44.7027 6.37812H35.3067ZM38.0595 8.12949C38.1749 8.13322 38.2881 8.16994 38.3859 8.23544L42.6927 11.0009C42.9191 11.1419 43.0022 11.403 43.0022 11.615C43.0022 11.8269 42.9187 12.0878 42.6924 12.2288L38.3862 14.9946C38.1806 15.132 37.9132 15.1341 37.706 15.002L37.7043 15.0009C37.4997 14.8683 37.3782 14.6208 37.3845 14.3727V8.84956C37.3797 8.49772 37.6466 8.14891 38.0086 8.13007L38.0595 8.12949ZM38.7038 13.1249L41.0623 11.6144L38.7038 10.0996V13.1249ZM42.675 11.8255C42.6603 11.8574 42.6421 11.887 42.6201 11.913L42.6503 11.8717C42.6595 11.8571 42.6677 11.8414 42.675 11.8255Z" fill="#8A8A8A"/>
-</svg>

packages/design-system/src/icons/text-to-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 14.5V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17.5M11.3333 2H2M14 6H2M10.0667 9.93327H2M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V14M7 20L5 18M14 13.3333L18 16L14 18.6667V13.3333Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/text-to-video.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 14.5V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17.5M11.3333 2H2M14 6H2M10.0667 9.93327H2M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V14M7 20L5 18M14 13.3333L18 16L14 18.6667V13.3333Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/splash.css

@@ -1,51 +0,0 @@
-/* Pre-Vue splash loader — colors set by inline script */
-#splash-loader {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  contain: strict;
-}
-#splash-loader svg {
-  width: min(200px, 50vw);
-  height: auto;
-  transform: translateZ(0);
-}
-#splash-loader .wave-group {
-  animation: splash-rise 4s ease-in-out infinite alternate;
-  will-change: transform;
-  transform: translateZ(0);
-}
-#splash-loader .wave-path {
-  animation: splash-wave 1.2s linear infinite;
-  will-change: transform;
-  transform: translateZ(0);
-}
-@keyframes splash-rise {
-  from {
-    transform: translateY(280px);
-  }
-  to {
-    transform: translateY(-80px);
-  }
-}
-@keyframes splash-wave {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-880px);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  #splash-loader .wave-group,
-  #splash-loader .wave-path {
-    animation: none;
-  }
-  #splash-loader .wave-group {
-    transform: translateY(-80px);
-  }
-}

src/App.vue

@@ -2,21 +2,29 @@
   <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, watch } from 'vue'
+import { computed, onMounted, onUnmounted } 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'
-import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
-
-import { electronAPI } from '@/utils/envUtil'
 import { isDesktop } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
+import { useDialogService } from '@/services/dialogService'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { electronAPI } from '@/utils/envUtil'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
 const workspaceStore = useWorkspaceStore()
 app.extensionManager = useWorkspaceStore()
@@ -24,16 +32,6 @@ 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) {
@@ -68,5 +66,26 @@ onMounted(() => {
   // Initialize conflict detection in background
   // This runs async and doesn't block UI setup
   void conflictDetection.initializeConflictDetection()
+
+  // Show cloud notification for macOS desktop users (one-time)
+  if (isDesktop && electronAPI()?.getPlatform() === 'darwin') {
+    const settingStore = useSettingStore()
+    if (!settingStore.get('Comfy.Desktop.CloudNotificationShown')) {
+      const dialogService = useDialogService()
+      cloudNotificationTimer = setTimeout(async () => {
+        try {
+          await dialogService.showCloudNotification()
+        } catch (e) {
+          console.warn('[CloudNotification] Failed to show', e)
+        }
+        await settingStore.set('Comfy.Desktop.CloudNotificationShown', true)
+      }, 2000)
+    }
+  }
+})
+
+let cloudNotificationTimer: ReturnType<typeof setTimeout> | undefined
+onUnmounted(() => {
+  if (cloudNotificationTimer) clearTimeout(cloudNotificationTimer)
 })
 </script>

src/components/TopMenuSection.test.ts

@@ -78,6 +78,14 @@ 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>
@@ -131,6 +139,18 @@ 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,
@@ -166,22 +186,13 @@ describe('TopMenuSection', () => {
   })
 
   describe('authentication state', () => {
-    function createLegacyTabBarWrapper() {
-      const pinia = createTestingPinia({ createSpy: vi.fn })
-      const settingStore = useSettingStore(pinia)
-      vi.mocked(settingStore.get).mockImplementation((key) =>
-        key === 'Comfy.UI.TabBarLayout' ? 'Legacy' : undefined
-      )
-      return createWrapper({ pinia })
-    }
-
     describe('when user is logged in', () => {
       beforeEach(() => {
         mockData.isLoggedIn = true
       })
 
       it('should display CurrentUserButton and not display LoginButton', () => {
-        const wrapper = createLegacyTabBarWrapper()
+        const wrapper = createWrapper()
         expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(true)
         expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
       })
@@ -195,7 +206,7 @@ describe('TopMenuSection', () => {
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
           mockData.isDesktop = true
-          const wrapper = createLegacyTabBarWrapper()
+          const wrapper = createWrapper()
           expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
         })
@@ -203,7 +214,7 @@ describe('TopMenuSection', () => {
 
       describe('on web platform', () => {
         it('should not display CurrentUserButton and not display LoginButton', () => {
-          const wrapper = createLegacyTabBarWrapper()
+          const wrapper = createWrapper()
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
           expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
         })
@@ -515,4 +526,69 @@ 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,6 +39,7 @@
             <!-- 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>
 
@@ -61,7 +62,7 @@
               @click="() => openShareDialog().catch(toastErrorHandler)"
               @pointerenter="prefetchShareDialog"
             >
-              <i class="icon-[comfy--send] size-4" />
+              <i class="icon-[lucide--share-2] size-4" />
               <span class="not-md:hidden">
                 {{ t('actionbar.share') }}
               </span>
@@ -116,7 +117,7 @@
 <script setup lang="ts">
 import { useLocalStorage, useMutationObserver } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
@@ -213,7 +214,7 @@ const actionbarContainerClass = computed(() => {
   return cn(base, 'px-2', borderClass)
 })
 const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
+  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
 )
 const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
   useQueueFeatureFlags()
@@ -264,6 +265,7 @@ const rightSidePanelTooltipConfig = computed(() =>
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
 const hasLegacyContent = ref(false)
+let legacyContentCheckRafId: number | null = null
 
 function checkLegacyContent() {
   const el = legacyCommandsContainerRef.value
@@ -276,19 +278,35 @@ function checkLegacyContent() {
     el.querySelector(':scope > * > *:not(:empty)') !== null
 }
 
-useMutationObserver(legacyCommandsContainerRef, checkLegacyContent, {
+function scheduleLegacyContentCheck() {
+  if (legacyContentCheckRafId !== null) return
+
+  legacyContentCheckRafId = requestAnimationFrame(() => {
+    legacyContentCheckRafId = null
+    checkLegacyContent()
+  })
+}
+
+useMutationObserver(legacyCommandsContainerRef, scheduleLegacyContentCheck, {
   childList: true,
-  subtree: true,
-  characterData: true
+  subtree: true
 })
 
 onMounted(() => {
   if (legacyCommandsContainerRef.value) {
     app.menu.element.style.width = 'fit-content'
     legacyCommandsContainerRef.value.appendChild(app.menu.element)
+    checkLegacyContent()
   }
 })
 
+onBeforeUnmount(() => {
+  if (legacyContentCheckRafId === null) return
+
+  cancelAnimationFrame(legacyContentCheckRafId)
+  legacyContentCheckRafId = null
+})
+
 const openCustomNodeManager = async () => {
   try {
     await managerState.openManager({

src/components/bottomPanel/BottomPanel.vue

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

src/components/builder/AppBuilder.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { remove } from 'es-toolkit'
-import { computed, provide, ref, toValue } from 'vue'
+import { computed, ref, toValue } from 'vue'
 import type { MaybeRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import AppModeWidgetList from '@/components/builder/AppModeWidgetList.vue'
 import DraggableList from '@/components/common/DraggableList.vue'
 import IoItem from '@/components/builder/IoItem.vue'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
-import WidgetItem from '@/components/rightSidePanel/parameters/WidgetItem.vue'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
@@ -30,7 +30,6 @@ import { useAppMode } from '@/composables/useAppMode'
 import { nodeTypeValidForApp, useAppModeStore } from '@/stores/appModeStore'
 import { resolveNodeWidget } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
-import { HideLayoutFieldKey } from '@/types/widgetTypes'
 
 type BoundStyle = { top: string; left: string; width: string; height: string }
 
@@ -46,19 +45,8 @@ const { isSelectMode, isSelectInputsMode, isSelectOutputsMode, isArrangeMode } =
   useAppMode()
 const hoveringSelectable = ref(false)
 
-provide(HideLayoutFieldKey, true)
-
 workflowStore.activeWorkflow?.changeTracker?.reset()
 
-const arrangeInputs = computed(() =>
-  appModeStore.selectedInputs
-    .map(([nodeId, widgetName]) => {
-      const [node, widget] = resolveNodeWidget(nodeId, widgetName)
-      return node ? { nodeId, widgetName, node, widget } : null
-    })
-    .filter((item): item is NonNullable<typeof item> => item !== null)
-)
-
 const inputsWithState = computed(() =>
   appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
     const [node, widget] = resolveNodeWidget(nodeId, widgetName)
@@ -201,7 +189,9 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
 </script>
 <template>
   <div class="flex h-full flex-col">
-    <div class="flex items-center border-b border-border-subtle p-2 font-bold">
+    <div
+      class="flex h-12 items-center border-b border-border-subtle px-4 font-bold"
+    >
       {{
         isArrangeMode ? t('nodeHelpPage.inputs') : t('linearMode.builder.title')
       }}
@@ -209,34 +199,10 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
       <DraggableList
         v-if="isArrangeMode"
-        v-slot="{ dragClass }"
         v-model="appModeStore.selectedInputs"
         class="overflow-x-clip"
       >
-        <div
-          v-for="{ nodeId, widgetName, node, widget } in arrangeInputs"
-          :key="`${nodeId}: ${widgetName}`"
-          :class="cn(dragClass, 'pointer-events-auto my-2 p-2')"
-          :aria-label="`${widget?.label ?? widgetName} — ${node.title}`"
-        >
-          <div v-if="widget" class="pointer-events-none" inert>
-            <WidgetItem
-              :widget="widget"
-              :node="node"
-              show-node-name
-              hidden-widget-actions
-            />
-          </div>
-          <div
-            v-else
-            class="pointer-events-none p-1 text-sm text-muted-foreground"
-          >
-            {{ widgetName }}
-            <p class="text-xs italic">
-              ({{ t('linearMode.builder.unknownWidget') }})
-            </p>
-          </div>
-        </div>
+        <AppModeWidgetList builder-mode />
       </DraggableList>
       <PropertiesAccordionItem
         v-if="isSelectInputsMode"

src/components/builder/AppModeWidgetList.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { computed, provide, shallowRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Popover from '@/components/ui/Popover.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
+import DropZone from '@/renderer/extensions/linearMode/DropZone.vue'
+import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useAppModeStore } from '@/stores/appModeStore'
+import { resolveNodeWidget } from '@/utils/litegraphUtil'
+import { cn } from '@/utils/tailwindUtil'
+import { HideLayoutFieldKey } from '@/types/widgetTypes'
+import { promptRenameWidget } from '@/utils/widgetUtil'
+
+interface WidgetEntry {
+  key: string
+  nodeData: ReturnType<typeof nodeToNodeData> & {
+    widgets: NonNullable<ReturnType<typeof nodeToNodeData>['widgets']>
+  }
+  action: { widget: IBaseWidget; node: LGraphNode }
+}
+
+const { mobile = false, builderMode = false } = defineProps<{
+  mobile?: boolean
+  builderMode?: boolean
+}>()
+
+const { t } = useI18n()
+const executionErrorStore = useExecutionErrorStore()
+const appModeStore = useAppModeStore()
+
+provide(HideLayoutFieldKey, true)
+
+const graphNodes = shallowRef<LGraphNode[]>(app.rootGraph.nodes)
+useEventListener(
+  app.rootGraph.events,
+  'configured',
+  () => (graphNodes.value = app.rootGraph.nodes)
+)
+
+const mappedSelections = computed((): WidgetEntry[] => {
+  void graphNodes.value
+  const nodeDataByNode = new Map<
+    LGraphNode,
+    ReturnType<typeof nodeToNodeData>
+  >()
+
+  return appModeStore.selectedInputs.flatMap(([nodeId, widgetName]) => {
+    const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+    if (!widget || !node || node.mode !== LGraphEventMode.ALWAYS) return []
+
+    if (!nodeDataByNode.has(node)) {
+      nodeDataByNode.set(node, nodeToNodeData(node))
+    }
+    const fullNodeData = nodeDataByNode.get(node)!
+
+    const matchingWidget = fullNodeData.widgets?.find((vueWidget) => {
+      if (vueWidget.slotMetadata?.linked) return false
+
+      if (!node.isSubgraphNode()) return vueWidget.name === widget.name
+
+      const storeNodeId = vueWidget.storeNodeId?.split(':')?.[1] ?? ''
+      return (
+        isPromotedWidgetView(widget) &&
+        widget.sourceNodeId == storeNodeId &&
+        widget.sourceWidgetName === vueWidget.storeName
+      )
+    })
+    if (!matchingWidget) return []
+
+    matchingWidget.slotMetadata = undefined
+    matchingWidget.nodeId = String(node.id)
+
+    return [
+      {
+        key: `${nodeId}:${widgetName}`,
+        nodeData: {
+          ...fullNodeData,
+          widgets: [matchingWidget]
+        },
+        action: { widget, node }
+      }
+    ]
+  })
+})
+
+function getDropIndicator(node: LGraphNode) {
+  if (node.type !== 'LoadImage') return undefined
+
+  const filename = node.widgets?.[0]?.value
+  const resultItem = { type: 'input', filename: `${filename}` }
+
+  const buildImageUrl = () => {
+    if (!filename) return undefined
+    const params = new URLSearchParams(resultItem)
+    appendCloudResParam(params, resultItem.filename)
+    return api.apiURL(`/view?${params}${app.getPreviewFormatParam()}`)
+  }
+
+  return {
+    iconClass: 'icon-[lucide--image]',
+    imageUrl: buildImageUrl(),
+    label: mobile ? undefined : t('linearMode.dragAndDropImage'),
+    onClick: () => node.widgets?.[1]?.callback?.(undefined)
+  }
+}
+
+function nodeToNodeData(node: LGraphNode) {
+  const dropIndicator = getDropIndicator(node)
+  const nodeData = extractVueNodeData(node)
+
+  return {
+    ...nodeData,
+    hasErrors: !!executionErrorStore.lastNodeErrors?.[node.id],
+    dropIndicator,
+    onDragDrop: node.onDragDrop,
+    onDragOver: node.onDragOver
+  }
+}
+</script>
+<template>
+  <div
+    v-for="{ key, nodeData, action } in mappedSelections"
+    :key
+    :class="
+      cn(
+        builderMode &&
+          'draggable-item drag-handle pointer-events-auto relative cursor-grab [&.is-draggable]:cursor-grabbing'
+      )
+    "
+    :aria-label="
+      builderMode
+        ? `${action.widget.label ?? action.widget.name} — ${action.node.title}`
+        : undefined
+    "
+  >
+    <div
+      :class="
+        cn(
+          'mt-1.5 flex min-h-8 items-center gap-1 px-3',
+          builderMode && 'drag-handle'
+        )
+      "
+    >
+      <span
+        :class="cn('truncate text-sm/8', builderMode && 'pointer-events-none')"
+      >
+        {{ action.widget.label || action.widget.name }}
+      </span>
+      <span
+        v-if="builderMode"
+        class="pointer-events-none mx-1 min-w-10 flex-1 truncate text-right text-xs text-muted-foreground"
+      >
+        {{ action.node.title }}
+      </span>
+      <div v-else class="flex-1" />
+      <Popover
+        :class="cn('shrink-0', builderMode && 'pointer-events-auto')"
+        :entries="[
+          {
+            label: t('g.rename'),
+            icon: 'icon-[lucide--pencil]',
+            command: () => promptRenameWidget(action.widget, action.node, t)
+          },
+          {
+            label: t('g.remove'),
+            icon: 'icon-[lucide--x]',
+            command: () =>
+              appModeStore.removeSelectedInput(action.widget, action.node)
+          }
+        ]"
+      >
+        <template #button>
+          <Button variant="textonly" size="icon">
+            <i class="icon-[lucide--ellipsis]" />
+          </Button>
+        </template>
+      </Popover>
+    </div>
+    <div
+      :class="builderMode && 'pointer-events-none'"
+      :inert="builderMode || undefined"
+    >
+      <DropZone
+        :on-drag-over="nodeData.onDragOver"
+        :on-drag-drop="nodeData.onDragDrop"
+        :drop-indicator="nodeData.dropIndicator"
+        class="text-muted-foreground"
+      >
+        <NodeWidgets
+          :node-data
+          :class="
+            cn(
+              'gap-y-3 rounded-lg py-1 [&_textarea]:resize-y **:[.col-span-2]:grid-cols-1 not-md:**:[.h-7]:h-10',
+              nodeData.hasErrors && 'ring-2 ring-node-stroke-error ring-inset'
+            )
+          "
+        />
+      </DropZone>
+    </div>
+  </div>
+</template>

src/components/builder/useAppSetDefaultView.ts

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

src/components/common/ScrubableNumberInput.stories.ts

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

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

src/components/common/SearchBox.test.ts

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

src/components/common/SearchBox.vue

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

src/components/common/SearchBoxV2.test.ts

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

src/components/common/SearchBoxV2.vue

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

src/components/common/SystemStatsPanel.vue

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

src/components/common/TreeExplorerV2.vue

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

src/components/common/TreeExplorerV2Node.vue

@@ -8,7 +8,6 @@
     <!-- Node -->
     <div
       v-if="item.value.type === 'node'"
-      v-bind="$attrs"
       :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
       :style="rowStyle"
       draggable="true"
@@ -49,7 +48,6 @@
     <!-- Folder -->
     <div
       v-else
-      v-bind="$attrs"
       :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
       :style="rowStyle"
       @click.stop="handleClick($event, handleToggle, handleSelect)"
@@ -100,12 +98,8 @@ 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 cursor-pointer select-none items-center gap-3 overflow-hidden py-2 outline-none hover:bg-comfy-input mx-2 rounded'
+  'group/tree-node flex w-full min-w-0 cursor-pointer select-none items-center gap-3 overflow-hidden py-2 outline-none hover:bg-comfy-input mx-2 rounded'
 
 const { item } = defineProps<{
   item: FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>>

src/components/common/UserAvatar.vue

@@ -1,6 +1,6 @@
 <template>
   <Avatar
-    class="aspect-square bg-interface-panel-selected-surface"
+    class="bg-interface-panel-selected-surface"
     :image="photoUrl ?? undefined"
     :icon="hasAvatar ? undefined : 'icon-[lucide--user]'"
     :pt:icon:class="{ 'size-4': !hasAvatar }"

src/components/common/WorkflowActionsDropdown.vue

@@ -12,6 +12,7 @@ import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useNewMenuItemIndicator } from '@/composables/useNewMenuItemIndicator'
 import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
+import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -23,6 +24,7 @@ const { source, align = 'start' } = defineProps<{
 
 const { t } = useI18n()
 const canvasStore = useCanvasStore()
+const keybindingStore = useKeybindingStore()
 const dropdownOpen = ref(false)
 
 const { menuItems } = useWorkflowActionsMenu(
@@ -43,6 +45,16 @@ function handleOpen(open: boolean) {
   }
 }
 
+function toggleModeTooltip() {
+  const label = canvasStore.linearMode
+    ? t('breadcrumbsMenu.enterNodeGraph')
+    : t('breadcrumbsMenu.enterAppMode')
+  const shortcut = keybindingStore
+    .getKeybindingByCommandId('Comfy.ToggleLinear')
+    ?.combo.toString()
+  return label + (shortcut ? t('g.shortcutSuffix', { shortcut }) : '')
+}
+
 function toggleLinearMode() {
   dropdownOpen.value = false
   void useCommandStore().execute('Comfy.ToggleLinear', {
@@ -52,7 +64,14 @@ function toggleLinearMode() {
 
 const tooltipPt = {
   root: {
-    style: { transform: 'translateX(calc(50% - 16px))' }
+    style: {
+      transform: 'translateX(calc(50% - 16px))',
+      whiteSpace: 'nowrap',
+      maxWidth: 'none'
+    }
+  },
+  text: {
+    style: { whiteSpace: 'nowrap' }
   },
   arrow: {
     class: '!left-[16px]'
@@ -68,9 +87,7 @@ const tooltipPt = {
       >
         <Button
           v-tooltip.bottom="{
-            value: canvasStore.linearMode
-              ? t('breadcrumbsMenu.enterNodeGraph')
-              : t('breadcrumbsMenu.enterAppMode'),
+            value: toggleModeTooltip(),
             showDelay: 300,
             hideDelay: 300,
             pt: tooltipPt

src/components/curve/CurveEditor.vue

@@ -74,17 +74,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useTemplateRef } from 'vue'
+import { computed, toRef, useTemplateRef } from 'vue'
 
 import { useCurveEditor } from '@/composables/useCurveEditor'
 
-import type { CurvePoint } from './types'
+import type { CurveInterpolation, CurvePoint } from './types'
 
 import { histogramToPath } from './curveUtils'
 
-const { curveColor = 'white', histogram } = defineProps<{
+const {
+  curveColor = 'white',
+  histogram,
+  interpolation = 'monotone_cubic'
+} = defineProps<{
   curveColor?: string
   histogram?: Uint32Array | null
+  interpolation?: CurveInterpolation
 }>()
 
 const modelValue = defineModel<CurvePoint[]>({
@@ -95,7 +100,8 @@ const svgRef = useTemplateRef<SVGSVGElement>('svgRef')
 
 const { curvePath, handleSvgPointerDown, startDrag } = useCurveEditor({
   svgRef,
-  modelValue
+  modelValue,
+  interpolation: toRef(() => interpolation)
 })
 
 const histogramPath = computed(() =>

src/components/curve/WidgetCurve.vue

@@ -1,16 +1,60 @@
 <template>
-  <CurveEditor v-model="modelValue" />
+  <div class="flex flex-col gap-1">
+    <Select
+      :model-value="modelValue.interpolation"
+      @update:model-value="onInterpolationChange"
+    >
+      <SelectTrigger size="md">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem
+          v-for="interp in CURVE_INTERPOLATIONS"
+          :key="interp"
+          :value="interp"
+        >
+          {{ $t(`curveWidget.${interp}`) }}
+        </SelectItem>
+      </SelectContent>
+    </Select>
+    <CurveEditor
+      :model-value="modelValue.points"
+      :interpolation="modelValue.interpolation"
+      @update:model-value="onPointsChange"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-import type { CurvePoint } from './types'
+import Select from '@/components/ui/select/Select.vue'
+import SelectContent from '@/components/ui/select/SelectContent.vue'
+import SelectItem from '@/components/ui/select/SelectItem.vue'
+import SelectTrigger from '@/components/ui/select/SelectTrigger.vue'
+import SelectValue from '@/components/ui/select/SelectValue.vue'
 
 import CurveEditor from './CurveEditor.vue'
+import { CURVE_INTERPOLATIONS } from './types'
+import type { CurveData, CurveInterpolation, CurvePoint } from './types'
 
-const modelValue = defineModel<CurvePoint[]>({
-  default: () => [
-    [0, 0],
-    [1, 1]
-  ]
+const modelValue = defineModel<CurveData>({
+  default: () => ({
+    points: [
+      [0, 0],
+      [1, 1]
+    ],
+    interpolation: 'monotone_cubic'
+  })
 })
+
+function onPointsChange(points: CurvePoint[]) {
+  modelValue.value = { ...modelValue.value, points }
+}
+
+function onInterpolationChange(value: unknown) {
+  if (typeof value !== 'string') return
+  modelValue.value = {
+    ...modelValue.value,
+    interpolation: value as CurveInterpolation
+  }
+}
 </script>

src/components/curve/curveUtils.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest'
 import type { CurvePoint } from './types'
 
 import {
+  createLinearInterpolator,
   createMonotoneInterpolator,
   curvesToLUT,
   histogramToPath
@@ -73,6 +74,64 @@ describe('createMonotoneInterpolator', () => {
   })
 })
 
+describe('createLinearInterpolator', () => {
+  it('returns 0 for empty points', () => {
+    const interpolate = createLinearInterpolator([])
+    expect(interpolate(0.5)).toBe(0)
+  })
+
+  it('returns constant for single point', () => {
+    const interpolate = createLinearInterpolator([[0.5, 0.7]])
+    expect(interpolate(0)).toBe(0.7)
+    expect(interpolate(1)).toBe(0.7)
+  })
+
+  it('passes through control points exactly', () => {
+    const points: CurvePoint[] = [
+      [0, 0],
+      [0.5, 0.8],
+      [1, 1]
+    ]
+    const interpolate = createLinearInterpolator(points)
+    expect(interpolate(0)).toBe(0)
+    expect(interpolate(0.5)).toBeCloseTo(0.8, 10)
+    expect(interpolate(1)).toBe(1)
+  })
+
+  it('linearly interpolates between points', () => {
+    const points: CurvePoint[] = [
+      [0, 0],
+      [1, 1]
+    ]
+    const interpolate = createLinearInterpolator(points)
+    expect(interpolate(0.25)).toBeCloseTo(0.25, 10)
+    expect(interpolate(0.5)).toBeCloseTo(0.5, 10)
+    expect(interpolate(0.75)).toBeCloseTo(0.75, 10)
+  })
+
+  it('clamps to endpoint values outside range', () => {
+    const points: CurvePoint[] = [
+      [0.2, 0.3],
+      [0.8, 0.9]
+    ]
+    const interpolate = createLinearInterpolator(points)
+    expect(interpolate(0)).toBe(0.3)
+    expect(interpolate(1)).toBe(0.9)
+  })
+
+  it('handles unsorted input points', () => {
+    const points: CurvePoint[] = [
+      [1, 1],
+      [0, 0],
+      [0.5, 0.5]
+    ]
+    const interpolate = createLinearInterpolator(points)
+    expect(interpolate(0)).toBe(0)
+    expect(interpolate(0.5)).toBeCloseTo(0.5, 10)
+    expect(interpolate(1)).toBe(1)
+  })
+})
+
 describe('curvesToLUT', () => {
   it('returns a 256-entry Uint8Array', () => {
     const lut = curvesToLUT([

src/components/curve/curveUtils.ts

@@ -1,4 +1,50 @@
-import type { CurvePoint } from './types'
+import type { CurveInterpolation, CurvePoint } from './types'
+
+/**
+ * Piecewise linear interpolation through sorted control points.
+ * Returns a function that evaluates y for any x in [0, 1].
+ */
+export function createLinearInterpolator(
+  points: CurvePoint[]
+): (x: number) => number {
+  if (points.length === 0) return () => 0
+  if (points.length === 1) return () => points[0][1]
+
+  const sorted = [...points].sort((a, b) => a[0] - b[0])
+  const n = sorted.length
+  const xs = sorted.map((p) => p[0])
+  const ys = sorted.map((p) => p[1])
+
+  return (x: number): number => {
+    if (x <= xs[0]) return ys[0]
+    if (x >= xs[n - 1]) return ys[n - 1]
+
+    let lo = 0
+    let hi = n - 1
+    while (lo < hi - 1) {
+      const mid = (lo + hi) >> 1
+      if (xs[mid] <= x) lo = mid
+      else hi = mid
+    }
+
+    const dx = xs[hi] - xs[lo]
+    if (dx === 0) return ys[lo]
+    const t = (x - xs[lo]) / dx
+    return ys[lo] + t * (ys[hi] - ys[lo])
+  }
+}
+
+/**
+ * Factory that dispatches to the correct interpolator based on type.
+ */
+export function createInterpolator(
+  points: CurvePoint[],
+  interpolation: CurveInterpolation
+): (x: number) => number {
+  return interpolation === 'linear'
+    ? createLinearInterpolator(points)
+    : createMonotoneInterpolator(points)
+}
 
 /**
  * Monotone cubic Hermite interpolation.
@@ -106,9 +152,12 @@ export function histogramToPath(histogram: Uint32Array): string {
   return parts.join(' ')
 }
 
-export function curvesToLUT(points: CurvePoint[]): Uint8Array {
+export function curvesToLUT(
+  points: CurvePoint[],
+  interpolation: CurveInterpolation = 'monotone_cubic'
+): Uint8Array {
   const lut = new Uint8Array(256)
-  const interpolate = createMonotoneInterpolator(points)
+  const interpolate = createInterpolator(points, interpolation)
 
   for (let i = 0; i < 256; i++) {
     const x = i / 255

src/components/curve/types.ts

@@ -1 +1,10 @@
 export type CurvePoint = [x: number, y: number]
+
+export const CURVE_INTERPOLATIONS = ['monotone_cubic', 'linear'] as const
+
+export type CurveInterpolation = (typeof CURVE_INTERPOLATIONS)[number]
+
+export interface CurveData {
+  points: CurvePoint[]
+  interpolation: CurveInterpolation
+}

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

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

src/components/dialog/content/MissingModelsContent.vue

@@ -30,31 +30,33 @@
           </div>
           <div class="flex shrink-0 items-center gap-2">
             <Skeleton v-if="showSkeleton(model)" class="ml-1.5 h-4 w-12" />
-            <span
-              v-else-if="model.isDownloadable && fileSizes.get(model.url)"
-              class="pl-1.5 text-xs text-muted-foreground"
-            >
-              {{ formatSize(fileSizes.get(model.url)) }}
-            </span>
-            <a
-              v-else-if="gatedModelUrls.has(model.url)"
-              :href="gatedModelUrls.get(model.url)"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-xs text-primary hover:underline"
-            >
-              {{ $t('missingModelsDialog.acceptTerms') }}
-            </a>
-            <Button
-              v-else-if="model.isDownloadable"
-              variant="textonly"
-              size="icon"
-              :title="model.url"
-              :aria-label="$t('g.download')"
-              @click="downloadModel(model, paths)"
-            >
-              <i class="icon-[lucide--download] size-4" />
-            </Button>
+            <template v-else-if="model.isDownloadable">
+              <span
+                v-if="fileSizes.get(model.url)"
+                class="pl-1.5 text-xs text-muted-foreground"
+              >
+                {{ formatSize(fileSizes.get(model.url)) }}
+              </span>
+              <a
+                v-if="gatedModelUrls.has(model.url)"
+                :href="gatedModelUrls.get(model.url)"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-xs text-primary hover:underline"
+              >
+                {{ $t('missingModelsDialog.acceptTerms') }}
+              </a>
+              <Button
+                v-else
+                variant="textonly"
+                size="icon"
+                :title="model.url"
+                :aria-label="$t('g.download')"
+                @click="downloadModel(model, paths)"
+              >
+                <i class="icon-[lucide--download] size-4" />
+              </Button>
+            </template>
             <Button
               v-else
               variant="textonly"

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

@@ -1,6 +1,6 @@
 <template>
   <div class="keybinding-panel flex flex-col gap-2">
-    <SearchInput
+    <SearchBox
       v-model="filters['global'].value"
       :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
     />
@@ -59,15 +59,7 @@
         :pt="{ bodyCell: 'p-1 min-h-8' }"
       >
         <template #body="slotProps">
-          <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"
-            />
+          <div class="truncate" :title="slotProps.data.id">
             {{ slotProps.data.label }}
           </div>
         </template>
@@ -101,6 +93,44 @@
       </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"
@@ -117,14 +147,18 @@
 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 } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useEditKeybindingDialog } from '@/composables/useEditKeybindingDialog'
-import type { KeybindingImpl } from '@/platform/keybindings/keybinding'
+import { KeyComboImpl } from '@/platform/keybindings/keyCombo'
+import { KeybindingImpl } from '@/platform/keybindings/keybinding'
 import { useKeybindingService } from '@/platform/keybindings/keybindingService'
 import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -161,16 +195,50 @@ const commandsData = computed<ICommandData[]>(() => {
 })
 
 const selectedCommandData = ref<ICommandData | null>(null)
-const editKeybindingDialog = useEditKeybindingDialog()
+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)
+})
 
 function editKeybinding(commandData: ICommandData) {
-  editKeybindingDialog.show({
-    commandId: commandData.id,
-    commandLabel: commandData.label,
-    currentCombo: commandData.keybinding?.combo ?? null
-  })
+  currentEditingCommand.value = commandData
+  newBindingKeyCombo.value = commandData.keybinding
+    ? commandData.keybinding.combo
+    : null
+  editDialogVisible.value = true
 }
 
+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)
@@ -178,6 +246,40 @@ 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

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