fix: import preset now saves to storage and switches to it

Previously importPreset applied bindings but then reset to default,
discarding the preset identity. Now it persists the file and calls
switchPreset which handles the dirty check dialog.

.claude/settings.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(pnpx vitest run --testPathPattern=\"draftCacheV2.property\")",
+      "Bash(pnpx vitest run \"draftCacheV2.property\")",
+      "Bash(node -e \"const fc = require\\(''fast-check''\\); console.log\\(Object.keys\\(fc\\).filter\\(k => k.includes\\(''string''\\)\\).join\\('', ''\\)\\)\")"
+    ]
+  }
+}

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

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

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

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

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

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

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

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

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

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

.claude/skills/ticket-intake/SKILL.md

@@ -0,0 +1,361 @@
+---
+name: ticket-intake
+description: 'Parse ticket URL (Notion or GitHub), extract all data, initialize pipeline run. Use when starting work on a new ticket or when asked to pick up a ticket.'
+---
+
+# Ticket Intake
+
+Parses a ticket URL from supported sources (Notion or GitHub), extracts all relevant information, and creates a ticket in the pipeline API.
+
+> **🚨 CRITICAL REQUIREMENT**: This skill MUST register the ticket in the Pipeline API and update the source (Notion/GitHub). If these steps are skipped, the entire pipeline breaks. See [Mandatory API Calls](#mandatory-api-calls-execute-all-three) below.
+
+## Supported Sources
+
+| Source | URL Pattern                                         | Provider File         |
+| ------ | --------------------------------------------------- | --------------------- |
+| Notion | `https://notion.so/...` `https://www.notion.so/...` | `providers/notion.md` |
+| GitHub | `https://github.com/{owner}/{repo}/issues/{n}`      | `providers/github.md` |
+
+## Quick Start
+
+When given a ticket URL:
+
+1. **Detect source type** from URL pattern
+2. **Load provider-specific logic** from `providers/` directory
+3. Fetch ticket content via appropriate API
+4. Extract and normalize properties to common schema
+5. **Register ticket in pipeline API** ← MANDATORY
+6. **Update source** (Notion status / GitHub comment) ← MANDATORY
+7. **Run verification script** to confirm API registration
+8. Output summary and handoff to `research-orchestrator`
+
+## Configuration
+
+Uses the **production API** by default. No configuration needed for read operations.
+
+**Defaults (no setup required):**
+
+- API URL: `https://api-gateway-856475788601.us-central1.run.app`
+- Read-only endpoints at `/public/*` require no authentication
+
+**For write operations** (transitions, creating tickets), set:
+
+```bash
+export PIPELINE_API_KEY="..."  # Get from GCP Secret Manager or ask admin
+```
+
+**Optional (for local working artifacts):**
+
+```bash
+PIPELINE_DIR="${PIPELINE_DIR:-$HOME/repos/ticket-to-pr-pipeline}"
+```
+
+## Mandatory API Calls (Execute ALL Three)
+
+**⚠️ These three API calls are the ENTIRE POINT of this skill. Without them, the ticket is invisible to the pipeline, downstream skills will fail, and Notion status won't update.**
+
+**You MUST make these HTTP requests.** Use `curl` from bash — do not just read this as documentation.
+
+### Call 1: Create Ticket
+
+```bash
+API_URL="${PIPELINE_API_URL:-https://api-gateway-856475788601.us-central1.run.app}"
+API_KEY="${PIPELINE_API_KEY}"
+
+curl -s -X POST "${API_URL}/v1/tickets" \
+  -H "Authorization: Bearer ${API_KEY}" \
+  -H "Content-Type: application/json" \
+  -H "X-Agent-ID: ${AGENT_ID:-amp-agent}" \
+  -d '{
+    "notion_page_id": "NOTION_PAGE_UUID_HERE",
+    "title": "TICKET_TITLE_HERE",
+    "source": "notion",
+    "metadata": {
+      "description": "DESCRIPTION_HERE",
+      "priority": "High",
+      "labels": [],
+      "acceptanceCriteria": []
+    }
+  }'
+```
+
+Save the returned `id` — you need it for the next two calls.
+
+### Call 2: Transition to RESEARCH
+
+```bash
+TICKET_ID="id-from-step-1"
+
+curl -s -X POST "${API_URL}/v1/tickets/${TICKET_ID}/transition" \
+  -H "Authorization: Bearer ${API_KEY}" \
+  -H "Content-Type: application/json" \
+  -H "X-Agent-ID: ${AGENT_ID:-amp-agent}" \
+  -d '{
+    "to_state": "RESEARCH",
+    "reason": "Intake complete, starting research"
+  }'
+```
+
+### Call 3: Queue Source Update
+
+```bash
+curl -s -X POST "${API_URL}/v1/sync/queue" \
+  -H "Authorization: Bearer ${API_KEY}" \
+  -H "Content-Type: application/json" \
+  -H "X-Agent-ID: ${AGENT_ID:-amp-agent}" \
+  -d '{
+    "ticket_id": "TICKET_ID_HERE",
+    "action": "update_status",
+    "payload": { "status": "In Progress" },
+    "priority": "normal"
+  }'
+```
+
+> **Note:** The action MUST be `"update_status"` (not `"UPDATE_NOTION_STATUS"`). Valid actions: `update_status`, `update_pr_url`, `mark_done`.
+
+### TypeScript Equivalent (if using pipeline client)
+
+```typescript
+import { PipelineClient } from '@pipeline/client'
+
+const client = new PipelineClient({
+  apiUrl:
+    process.env.PIPELINE_API_URL ||
+    'https://api-gateway-856475788601.us-central1.run.app',
+  agentId: process.env.AGENT_ID!
+})
+
+const ticket = await client.createTicket({
+  notion_page_id: pageId,
+  title: ticketTitle,
+  source: 'notion',
+  metadata: { description, priority, labels, acceptanceCriteria }
+})
+
+await client.transitionState(
+  ticket.id,
+  'RESEARCH',
+  'Intake complete, starting research'
+)
+
+await client.queueSync(ticket.id, 'update_status', { status: 'In Progress' })
+```
+
+## Workflow
+
+### Step 1: Detect Source Type
+
+Parse the URL to determine source:
+
+```javascript
+if (url.includes('notion.so')) {
+  source = 'notion'
+  // Load providers/notion.md
+} else if (url.match(/github\.com\/[^\/]+\/[^\/]+\/issues\/\d+/)) {
+  source = 'github'
+  // Load providers/github.md
+} else {
+  // Error: Unsupported URL format
+}
+```
+
+### Step 2: Load Provider and Fetch Data
+
+Read the appropriate provider file for source-specific instructions:
+
+- **Notion**: `providers/notion.md` - Uses Notion MCP, handles Slack links
+- **GitHub**: `providers/github.md` - Uses `gh` CLI, handles Dosu comments
+
+Follow the provider's instructions for:
+
+- Fetching content
+- Extracting properties
+- **Updating the source** (Notion status → "In Progress", Assignee → pipeline owner)
+
+### Step 3: Normalize to Common Schema
+
+All providers must extract normalized ticket data following `schema.md`:
+
+```json
+{
+  "id": "abc12345",
+  "url": "https://...",
+  "source": "notion | github",
+  "title": "Ticket title",
+  "description": "Full description",
+  "status": "Not Started",
+  "assignee": "username",
+  "priority": "High",
+  "area": "UI",
+  "labels": ["bug", "frontend"],
+  "acceptanceCriteria": ["Criterion 1", "Criterion 2"],
+  "fetchedAt": "2024-01-15T10:30:00Z"
+}
+```
+
+### Step 4: Register Ticket in Pipeline API (MANDATORY — DO NOT SKIP)
+
+**Execute all three API calls from [Mandatory API Calls](#mandatory-api-calls-execute-all-three) above.**
+
+This is not optional. This is not documentation. You MUST make these HTTP requests right now.
+
+1. `createTicket()` → save the returned ticket ID
+2. `transitionState(id, 'RESEARCH')` → confirm state changed
+3. `queueSync(id, 'update_status', { status: 'In Progress' })` → confirm queued
+
+**If any call fails**, retry once. If it still fails, report the error prominently — do NOT silently continue.
+
+### Step 5: Run Verification Script
+
+After making the API calls, run the verification script to confirm everything worked:
+
+```bash
+bash scripts/verify-intake.sh TICKET_ID_OR_NOTION_PAGE_ID
+```
+
+**If the script is not available locally**, verify manually via the public API:
+
+```bash
+curl -s "${API_URL}/public/tickets/${TICKET_ID}" | jq '{id, state, title, notion_page_id}'
+```
+
+Expected output:
+
+```json
+{
+  "id": "...",
+  "state": "RESEARCH",
+  "title": "...",
+  "notion_page_id": "..."
+}
+```
+
+**If `state` is not `RESEARCH`, go back to Step 4 and complete the missing calls.**
+
+### Step 6: Output Summary and Handoff
+
+Print a clear summary:
+
+```markdown
+## Ticket Intake Complete
+
+**Source:** Notion | GitHub
+**Title:** [Ticket title]
+**ID:** abc12345
+**Status:** In Progress (queued)
+**Priority:** High
+**Area:** UI
+
+### Description
+
+[Brief description or first 200 chars]
+
+### Acceptance Criteria
+
+- [ ] Criterion 1
+- [ ] Criterion 2
+
+### Links
+
+- **Ticket:** [Original URL]
+- **Slack:** [Slack thread content fetched via slackdump] (Notion only)
+
+### Pipeline
+
+- **API Ticket ID:** abc12345
+- **State:** RESEARCH
+- **Verified:** ✅ (via verify-intake.sh or public API)
+```
+
+**After printing the summary, immediately handoff** to continue the pipeline. Use the `handoff` tool with all necessary context (ticket ID, source, title, description, slack context if any):
+
+> **Handoff goal:** "Continue pipeline for ticket {ID} ({title}). Ticket is in RESEARCH state. Load skill: `research-orchestrator` to begin research phase. Ticket data: source={source}, notion_page_id={pageId}, priority={priority}. {slack context summary if available}"
+
+**Do NOT wait for human approval to proceed.** The intake phase is complete — handoff immediately.
+
+## Error Handling
+
+### Unsupported URL
+
+```
+❌ Unsupported ticket URL format.
+
+Supported formats:
+- Notion: https://notion.so/... or https://www.notion.so/...
+- GitHub: https://github.com/{owner}/{repo}/issues/{number}
+
+Received: [provided URL]
+```
+
+### Provider-Specific Errors
+
+See individual provider files for source-specific error handling:
+
+- `providers/notion.md` - Authentication, page not found
+- `providers/github.md` - Auth, rate limits, issue not found
+
+### Missing Properties
+
+Continue with available data and note what's missing:
+
+```
+⚠️ Some properties unavailable:
+- Priority: not found (using default: Medium)
+- Area: not found
+
+Proceeding with available data...
+```
+
+### API Call Failures
+
+```
+❌ Pipeline API call failed: {method} {endpoint}
+   Status: {status}
+   Error: {message}
+
+Retrying once...
+
+❌ Retry also failed. INTAKE IS INCOMPLETE.
+   The ticket was NOT registered in the pipeline.
+   Downstream skills will not work until this is fixed.
+```
+
+## Notes
+
+- This skill focuses ONLY on intake — it does not do research
+- Slack thread content is fetched automatically via the `slackdump` skill — no manual copy-paste needed
+- ALL API calls (createTicket, transitionState, queueSync) are MANDATORY — never skip them
+- The `queueSync` action must be `"update_status"`, NOT `"UPDATE_NOTION_STATUS"`
+- Pipeline state is tracked via the API, not local files
+- Working artifacts (research-report.md, plan.md) can be saved locally to `$PIPELINE_DIR/runs/{ticket-id}/`
+- The `source` field in the ticket determines which research strategies to use
+
+## API Client Reference
+
+### Available Methods
+
+| Method                                                      | Description                                                         |
+| ----------------------------------------------------------- | ------------------------------------------------------------------- |
+| `createTicket({ notion_page_id, title, source, metadata })` | Create a new ticket in the API                                      |
+| `getTicket(id)`                                             | Retrieve a ticket by ID                                             |
+| `findByNotionId(notionPageId)`                              | Look up a ticket by its Notion page ID                              |
+| `listTickets({ state, agent_id, limit, offset })`           | List tickets with optional filters                                  |
+| `transitionState(id, state, reason)`                        | Move ticket to a new state (e.g., `'RESEARCH'`)                     |
+| `setPRCreated(id, prUrl)`                                   | Mark ticket as having a PR created                                  |
+| `queueSync(id, action, payload)`                            | Queue a sync action (`update_status`, `update_pr_url`, `mark_done`) |
+| `registerBranch(id, branch, repo)`                          | Register working branch for automatic PR detection                  |
+
+### Error Handling
+
+```typescript
+import { PipelineClient, PipelineAPIError } from '@pipeline/client';
+
+try {
+  await client.createTicket({ ... });
+} catch (error) {
+  if (error instanceof PipelineAPIError) {
+    console.error(`API Error ${error.status}: ${error.message}`);
+  }
+  throw error;
+}
+```

.claude/skills/ticket-intake/providers/github.md

@@ -0,0 +1,194 @@
+# GitHub Provider - Ticket Intake
+
+Provider-specific logic for ingesting tickets from GitHub Issues.
+
+## URL Pattern
+
+```
+https://github.com/{owner}/{repo}/issues/{number}
+https://www.github.com/{owner}/{repo}/issues/{number}
+```
+
+Extract: `owner`, `repo`, `issue_number` from URL.
+
+## Prerequisites
+
+- `gh` CLI authenticated (`gh auth status`)
+- Access to the repository
+
+## Fetch Issue Content
+
+Use `gh` CLI to fetch issue details:
+
+```bash
+# Get issue details in JSON
+gh issue view {number} --repo {owner}/{repo} --json title,body,state,labels,assignees,milestone,author,createdAt,comments,linkedPRs
+
+# Get comments separately if needed
+gh issue view {number} --repo {owner}/{repo} --comments
+```
+
+## Extract Ticket Data
+
+Map GitHub issue fields to normalized ticket data (stored via API):
+
+| GitHub Field | ticket.json Field | Notes                      |
+| ------------ | ----------------- | -------------------------- |
+| title        | title             | Direct mapping             |
+| body         | description       | Issue body/description     |
+| state        | status            | Map: open → "Not Started"  |
+| labels       | labels            | Array of label names       |
+| assignees    | assignee          | First assignee login       |
+| author       | author            | Issue author login         |
+| milestone    | milestone         | Milestone title if present |
+| comments     | comments          | Array of comment objects   |
+| linkedPRs    | linkedPRs         | PRs linked to this issue   |
+
+### Priority Mapping
+
+Infer priority from labels:
+
+- `priority:critical`, `P0` → "Critical"
+- `priority:high`, `P1` → "High"
+- `priority:medium`, `P2` → "Medium"
+- `priority:low`, `P3` → "Low"
+- No priority label → "Medium" (default)
+
+### Area Mapping
+
+Infer area from labels:
+
+- `area:ui`, `frontend`, `component:*` → "UI"
+- `area:api`, `backend` → "API"
+- `area:docs`, `documentation` → "Docs"
+- `bug`, `fix` → "Bug"
+- `enhancement`, `feature` → "Feature"
+
+## Update Source
+
+**For GitHub issues, update is optional but recommended.**
+
+Add a comment to indicate work has started:
+
+```bash
+gh issue comment {number} --repo {owner}/{repo} --body "🤖 Pipeline started processing this issue."
+```
+
+Optionally assign to self:
+
+```bash
+gh issue edit {number} --repo {owner}/{repo} --add-assignee @me
+```
+
+Log any updates via the Pipeline API:
+
+```typescript
+await client.updateTicket(ticketId, {
+  metadata: {
+    ...ticket.metadata,
+    githubWrites: [
+      ...(ticket.metadata?.githubWrites || []),
+      {
+        action: 'comment',
+        issueNumber: 123,
+        at: new Date().toISOString(),
+        skill: 'ticket-intake',
+        success: true
+      }
+    ]
+  }
+})
+```
+
+## GitHub-Specific Ticket Fields
+
+Store via API using `client.createTicket()`:
+
+```json
+{
+  "source": "github",
+  "githubOwner": "Comfy-Org",
+  "githubRepo": "ComfyUI_frontend",
+  "githubIssueNumber": 123,
+  "githubIssueUrl": "https://github.com/Comfy-Org/ComfyUI_frontend/issues/123",
+  "labels": ["bug", "area:ui", "priority:high"],
+  "linkedPRs": [456, 789],
+  "dosuComment": "..." // Extracted Dosu bot analysis if present
+}
+```
+
+## Dosu Bot Detection
+
+Many repositories use Dosu bot for automated issue analysis. Check comments for Dosu:
+
+```bash
+gh issue view {number} --repo {owner}/{repo} --comments | grep -A 100 "dosu"
+```
+
+Look for comments from:
+
+- `dosu[bot]`
+- `dosu-bot`
+
+Extract Dosu analysis which typically includes:
+
+- Root cause analysis
+- Suggested files to modify
+- Related issues/PRs
+- Potential solutions
+
+Store in ticket data via API:
+
+```json
+{
+  "dosuComment": {
+    "found": true,
+    "analysis": "...",
+    "suggestedFiles": ["src/file1.ts", "src/file2.ts"],
+    "relatedIssues": [100, 101]
+  }
+}
+```
+
+## Extract Linked Issues/PRs
+
+Parse issue body and comments for references:
+
+- `#123` → Issue or PR reference
+- `fixes #123`, `closes #123` → Linked issue
+- `https://github.com/.../issues/123` → Full URL reference
+
+Store in ticket data via API for research phase:
+
+```json
+{
+  "referencedIssues": [100, 101, 102],
+  "referencedPRs": [200, 201]
+}
+```
+
+## Error Handling
+
+### Authentication Error
+
+```
+⚠️ GitHub CLI not authenticated.
+Run: gh auth login
+```
+
+### Issue Not Found
+
+```
+❌ GitHub issue not found or inaccessible.
+- Check the URL is correct
+- Ensure you have access to this repository
+- Run: gh auth status
+```
+
+### Rate Limiting
+
+```
+⚠️ GitHub API rate limited.
+Wait a few minutes and try again.
+Check status: gh api rate_limit
+```

.claude/skills/ticket-intake/providers/notion.md

@@ -0,0 +1,202 @@
+# Notion Provider - Ticket Intake
+
+Provider-specific logic for ingesting tickets from Notion.
+
+## URL Pattern
+
+```
+https://www.notion.so/workspace/Page-Title-abc123def456...
+https://notion.so/Page-Title-abc123def456...
+https://www.notion.so/abc123def456...
+```
+
+Page ID is the 32-character hex string (with or without hyphens).
+
+## Prerequisites
+
+- Notion MCP connected and authenticated
+- If not setup: `claude mcp add --transport http notion https://mcp.notion.com/mcp`
+- Authenticate via `/mcp` command if prompted
+
+## Fetch Ticket Content
+
+Use `Notion:notion-fetch` with the page URL or ID:
+
+```
+Fetch the full page content including all properties
+```
+
+## Extract Ticket Data
+
+Extract these properties (names may vary):
+
+| Property      | Expected Name             | Type         |
+| ------------- | ------------------------- | ------------ |
+| Title         | Name / Title              | Title        |
+| Status        | Status                    | Select       |
+| Assignee      | Assignee / Assigned To    | Person       |
+| Description   | -                         | Page content |
+| Slack Link    | Slack Link / Slack Thread | URL          |
+| GitHub PR     | GitHub PR / PR Link       | URL          |
+| Priority      | Priority                  | Select       |
+| Area          | Area / Category           | Select       |
+| Related Tasks | Related Tasks             | Relation     |
+
+**If properties are missing**: Note what's unavailable and continue with available data.
+
+## Update Source (REQUIRED)
+
+**⚠️ DO NOT SKIP THIS STEP. This is a required action, not optional.**
+
+**⚠️ Notion Write Safety rules apply (see `$PIPELINE_DIR/docs/notion-write-safety.md` for full reference):**
+
+- **Whitelist**: Only `Status`, `GitHub PR`, and `Assignee` fields may be written
+- **Valid transitions**: Not Started → In Progress, In Progress → In Review, In Review → Done
+- **Logging**: Every write attempt MUST be logged with timestamp, field, value, previous value, skill name, and success status
+
+Use `Notion:notion-update-page` to update the ticket:
+
+1. **Status**: Set to "In Progress" (only valid from "Not Started")
+2. **Assignee**: Assign to pipeline owner (Notion ID: `175d872b-594c-81d4-ba5a-0002911c5966`)
+
+```json
+{
+  "page_id": "{page_id_from_ticket}",
+  "command": "update_properties",
+  "properties": {
+    "Status": "In Progress",
+    "Assignee": "175d872b-594c-81d4-ba5a-0002911c5966"
+  }
+}
+```
+
+**After the update succeeds**, log the write via the Pipeline API:
+
+```typescript
+await client.updateTicket(ticketId, {
+  metadata: {
+    ...ticket.metadata,
+    notionWrites: [
+      ...(ticket.metadata?.notionWrites || []),
+      {
+        field: 'Status',
+        value: 'In Progress',
+        previousValue: 'Not Started',
+        at: new Date().toISOString(),
+        skill: 'ticket-intake',
+        success: true
+      }
+    ]
+  }
+})
+```
+
+If update fails, log with `success: false` and continue.
+
+## Notion-Specific Ticket Fields
+
+Store via API using `client.createTicket()`:
+
+```json
+{
+  "source": "notion",
+  "notionPageId": "abc123def456...",
+  "slackLink": "https://slack.com/...",
+  "relatedTasks": ["page-id-1", "page-id-2"]
+}
+```
+
+## Slack Thread Handling
+
+If a Slack link exists, use the `slackdump` skill to fetch the thread content programmatically.
+
+### Slack URL Conversion
+
+Notion stores Slack links in `slackMessage://` format:
+
+```
+slackMessage://comfy-organization.slack.com/CHANNEL_ID/THREAD_TS/MESSAGE_TS
+```
+
+Convert to browser-clickable format:
+
+```
+https://comfy-organization.slack.com/archives/CHANNEL_ID/pMESSAGE_TS_NO_DOT
+```
+
+**Example:**
+
+- Input: `slackMessage://comfy-organization.slack.com/C075ANWQ8KS/1766022478.450909/1764772881.854829`
+- Output: `https://comfy-organization.slack.com/archives/C075ANWQ8KS/p1764772881854829`
+
+(Remove the dot from the last timestamp and prefix with `p`)
+
+### Fetching Thread Content
+
+Load the `slackdump` skill and use the **export-thread** workflow:
+
+```bash
+# Export thread by URL
+slackdump dump "https://comfy-organization.slack.com/archives/CHANNEL_ID/pMESSAGE_TS"
+
+# Or by colon notation (channel_id:thread_ts)
+slackdump dump CHANNEL_ID:THREAD_TS
+```
+
+Save the thread content to `$RUN_DIR/slack-context.md` and include it in the ticket metadata.
+
+> **No manual action required.** The slackdump CLI handles authentication via stored credentials at `~/.cache/slackdump/comfy-organization.bin`.
+
+## Database Reference: Comfy Tasks
+
+The "Comfy Tasks" database has these properties (verify via `notion-search`):
+
+- **Status values**: Not Started, In Progress, In Review, Done
+- **Team assignment**: "Frontend Team" for unassigned tickets
+- **Filtering note**: Team filtering in Notion may have quirks - handle gracefully
+
+### Pipeline Owner Details
+
+When assigning tickets, use these identifiers:
+
+| Platform        | Identifier                             |
+| --------------- | -------------------------------------- |
+| Notion User ID  | `175d872b-594c-81d4-ba5a-0002911c5966` |
+| Notion Name     | Christian Byrne                        |
+| Notion Email    | cbyrne@comfy.org                       |
+| Slack User ID   | U087MJCDHHC                            |
+| GitHub Username | christian-byrne                        |
+
+**To update Assignee**, use the Notion User ID (not name):
+
+```
+properties: {"Assignee": "175d872b-594c-81d4-ba5a-0002911c5966"}
+```
+
+### Finding Active Tickets
+
+To list your active tickets:
+
+```
+Use Notion:notion-search for "Comfy Tasks"
+Filter by Assignee = current user OR Team = "Frontend Team"
+```
+
+## Error Handling
+
+### Authentication Error
+
+```
+⚠️ Notion authentication required.
+Run: claude mcp add --transport http notion https://mcp.notion.com/mcp
+Then authenticate via /mcp command.
+```
+
+### Page Not Found
+
+```
+❌ Notion page not found or inaccessible.
+- Check the URL is correct
+- Ensure you have access to this page
+- Try re-authenticating via /mcp
+```

.claude/skills/ticket-intake/schema.md

@@ -0,0 +1,81 @@
+# Ticket Schema
+
+Common schema for normalized ticket data across all sources. This data is stored and retrieved via the Pipeline API, not local files.
+
+## Ticket Data Schema
+
+```json
+{
+  // Required fields (all sources)
+  "id": "string", // Unique identifier (short form)
+  "url": "string", // Original URL
+  "source": "notion | github", // Source type
+  "title": "string", // Ticket title
+  "description": "string", // Full description/body
+  "fetchedAt": "ISO8601", // When ticket was fetched
+
+  // Common optional fields
+  "status": "string", // Current status
+  "assignee": "string", // Assigned user
+  "priority": "string", // Priority level
+  "area": "string", // Category/area
+  "labels": ["string"], // Tags/labels
+  "acceptanceCriteria": ["string"] // List of AC items
+
+  // Source-specific fields (see providers)
+  // Notion: notionPageId, slackLink, relatedTasks, notionWrites
+  // GitHub: githubOwner, githubRepo, githubIssueNumber, linkedPRs, dosuComment, referencedIssues
+}
+```
+
+## Ticket State Schema (via API)
+
+State is managed via the Pipeline API using `client.transitionState()`:
+
+```json
+{
+  "ticketId": "string",
+  "state": "intake | research | planning | implementation | pr_created | done | failed",
+  "stateChangedAt": "ISO8601",
+
+  // Timestamps tracked by API
+  "createdAt": "ISO8601",
+  "updatedAt": "ISO8601"
+}
+```
+
+## Priority Normalization
+
+All sources should normalize to these values:
+
+| Normalized | Description               |
+| ---------- | ------------------------- |
+| Critical   | Production down, security |
+| High       | Blocking work, urgent     |
+| Medium     | Normal priority (default) |
+| Low        | Nice to have, backlog     |
+
+## Status Normalization
+
+Pipeline tracks these statuses internally:
+
+| Status         | Description                  |
+| -------------- | ---------------------------- |
+| research       | Gathering context            |
+| planning       | Creating implementation plan |
+| implementation | Writing code                 |
+| review         | Code review in progress      |
+| qa             | Quality assurance            |
+| done           | PR merged or completed       |
+
+## ID Generation
+
+IDs are generated by the API when creating tickets. For reference:
+
+- **Notion**: First 8 characters of page ID
+- **GitHub**: `gh-{owner}-{repo}-{issue_number}` (sanitized)
+
+Examples:
+
+- Notion: `abc12345`
+- GitHub: `gh-comfy-org-frontend-123`

.claude/skills/writing-storybook-stories/SKILL.md

@@ -0,0 +1,143 @@
+---
+name: writing-storybook-stories
+description: 'Write or update Storybook stories for Vue components in ComfyUI_frontend. Use when adding, modifying, reviewing, or debugging `.stories.ts` files, Storybook docs, component demos, or visual catalog entries in `src/` or `apps/desktop-ui/`.'
+---
+
+# Write Storybook Stories for ComfyUI_frontend
+
+## Workflow
+
+1. !!!!IMPORTANT Confirm the worktree is on a `feat/*` or `fix/*` branch. Base PRs on the local `main`, not a fork branch.
+2. Read the component source first. Understand props, emits, slots, exposed methods, and any supporting types or composables.
+3. Read nearby stories before writing anything.
+   - Search stories: `rg --files src apps | rg '\.stories\.ts$'`
+   - Inspect title patterns: `rg -n "title:\\s*'" src apps --glob '*.stories.ts'`
+4. If a Figma link is provided, list the states you need to cover before writing stories.
+5. Co-locate the story file with the component: `ComponentName.stories.ts`.
+6. Add each variation on separate stories, except hover state. this should be automatically applied by the implementation and not require a separate story.
+7. Run Storybook and validation checks before handing off.
+
+## Match Local Conventions
+
+- Copy the closest neighboring story instead of forcing one universal template.
+- Most repo stories use `@storybook/vue3-vite`. Some stories under `apps/desktop-ui` still use `@storybook/vue3`; keep the local convention for that area.
+- Add `tags: ['autodocs']` unless the surrounding stories in that area intentionally omit it.
+- Use `ComponentPropsAndSlots<typeof Component>` when it helps with prop and slot typing.
+- Keep `render` functions stateful when needed. Use `ref()`, `computed()`, and `toRefs(args)` instead of mutating Storybook args directly.
+- Use `args.default` or other slot-shaped args when the component content is provided through slots.
+- Use `ComponentExposed` only when a component's exposed API breaks the normal Storybook typing.
+- Add decorators for realistic width or background context when the component needs it.
+
+## Title Patterns
+
+Do not invent titles from scratch when a close sibling story already exists. Match the nearest domain pattern.
+
+| Component area                                          | Typical title pattern                |
+| ------------------------------------------------------- | ------------------------------------ |
+| `src/components/ui/button/Button.vue`                   | `Components/Button/Button`           |
+| `src/components/ui/input/Input.vue`                     | `Components/Input`                   |
+| `src/components/ui/search-input/SearchInput.vue`        | `Components/Input/SearchInput`       |
+| `src/components/common/SearchBox.vue`                   | `Components/Input/SearchBox`         |
+| `src/renderer/extensions/vueNodes/widgets/components/*` | `Widgets/<WidgetName>`               |
+| `src/platform/assets/components/*`                      | `Platform/Assets/<ComponentName>`    |
+| `apps/desktop-ui/src/components/*`                      | `Desktop/Components/<ComponentName>` |
+| `apps/desktop-ui/src/views/*`                           | `Desktop/Views/<ViewName>`           |
+
+If multiple patterns seem plausible, follow the closest sibling story in the same folder tree.
+
+## Common Story Shapes
+
+### Stateful input or `v-model`
+
+```typescript
+export const Default: Story = {
+  render: (args) => ({
+    components: { MyComponent },
+    setup() {
+      const { disabled, size } = toRefs(args)
+      const value = ref('Hello world')
+      return { value, disabled, size }
+    },
+    template:
+      '<MyComponent v-model="value" :disabled="disabled" :size="size" />'
+  })
+}
+```
+
+### Slot-driven content
+
+```typescript
+const meta: Meta<ComponentPropsAndSlots<typeof Button>> = {
+  argTypes: {
+    default: { control: 'text' }
+  },
+  args: {
+    default: 'Button'
+  }
+}
+
+export const SingleButton: Story = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args }
+    },
+    template: '<Button v-bind="args">{{ args.default }}</Button>'
+  })
+}
+```
+
+### Variants or edge cases grid
+
+```typescript
+export const AllVariants: Story = {
+  render: () => ({
+    components: { MyComponent },
+    template: `
+      <div class="grid gap-4 sm:grid-cols-2">
+        <MyComponent />
+        <MyComponent disabled />
+        <MyComponent loading />
+        <MyComponent invalid />
+      </div>
+    `
+  })
+}
+```
+
+## Figma Mapping
+
+- Extract the named states from the design first.
+- Prefer explicit prop-driven stories such as `Disabled`, `Loading`, `Invalid`, `WithPlaceholder`, `AllSizes`, or `EdgeCases`.
+- Add an aggregate story such as `AllVariants`, `AllSizes`, or `EdgeCases` when side-by-side comparison is useful.
+- Use pseudo-state parameters only if the addon is already configured in this repo.
+- If a Figma state cannot be represented exactly, capture the closest prop-driven version and explain the gap in the story docs.
+
+## Component-Specific Notes
+
+- Widget components often need a minimal `SimplifiedWidget` object. Build it in `setup()` and use `computed()` when `args` change `widget.options`.
+- Input and search components often need a width-constrained wrapper so they render at realistic sizes.
+- Asset and platform cards often need background decorators such as `bg-base-background` and fixed-width containers.
+- Desktop installer stories may need custom `backgrounds` parameters and may intentionally keep the older Storybook import style used by neighboring files.
+- Use semantic tokens such as `bg-base-background` and `bg-node-component-surface` instead of `dark:` variants or hardcoded theme assumptions.
+
+## Checklist
+
+- [ ] Read the component source and any supporting types or composables
+- [ ] Match the nearest local title pattern and story style
+- [ ] Include a baseline story; name it `Default` only when that matches nearby conventions
+- [ ] Add focused stories for meaningful states
+- [ ] Add `tags: ['autodocs']`
+- [ ] Keep the story co-located with the component
+- [ ] Run `pnpm storybook`
+- [ ] Run `pnpm typecheck`
+- [ ] Run `pnpm lint`
+
+## Avoid
+
+- Do not guess props, emits, slots, or exposed methods.
+- Do not force one generic title convention across the repo.
+- Do not mutate Storybook args directly for `v-model` components.
+- Do not introduce `dark:` Tailwind variants in story wrappers.
+- Do not create barrel files.
+- Do not assume every story needs `layout: 'centered'` or a `Default` export; follow the nearest existing pattern.

.claude/skills/writing-storybook-stories/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: 'ComfyUI Storybook Stories'
+  short_description: 'Write Vue Storybook stories for ComfyUI'
+  default_prompt: 'Use $writing-storybook-stories to add or update a Storybook story for this ComfyUI_frontend component.'

.env_example

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

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

@@ -19,7 +19,7 @@ runs:
     - name: Setup Node.js
       uses: actions/setup-node@v6
       with:
-        node-version: 'lts/*'
+        node-version-file: '.nvmrc'
         cache: 'pnpm'
         cache-dependency-path: './pnpm-lock.yaml'
 

.github/workflows/ci-lint-format.yaml

@@ -61,6 +61,22 @@ jobs:
           git commit -m "[automated] Apply ESLint and Oxfmt fixes"
           git push
 
+      - name: Fail for fork PRs with unfixed lint/format issues
+        if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name != github.repository
+        run: |
+          echo "::error::Linting/formatting issues found. Since this PR is from a fork, auto-fix cannot be applied automatically."
+          echo ""
+          echo "Please run these commands locally and push the changes:"
+          echo "  pnpm lint:fix"
+          echo "  pnpm stylelint:fix"
+          echo "  pnpm format"
+          echo ""
+          echo "Or set up pre-commit hooks to automatically format on every commit:"
+          echo "  pnpm prepare"
+          echo ""
+          echo "See CONTRIBUTING.md for more details."
+          exit 1
+
       - name: Final validation
         run: |
           pnpm lint
@@ -84,16 +100,3 @@ jobs:
               repo: context.repo.repo,
               body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Oxfmt formatting'
             })
-
-      - name: Comment on PR about manual fix needed
-        if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name != github.repository
-        continue-on-error: true
-        uses: actions/github-script@v8
-        with:
-          script: |
-            github.rest.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: '## ⚠️ Linting/Formatting Issues Found\n\nThis PR has linting or formatting issues that need to be fixed.\n\n**Since this PR is from a fork, auto-fix cannot be applied automatically.**\n\n### Option 1: Set up pre-commit hooks (recommended)\nRun this once to automatically format code on every commit:\n```bash\npnpm prepare\n```\n\n### Option 2: Fix manually\nRun these commands and push the changes:\n```bash\npnpm lint:fix\npnpm format\n```\n\nSee [CONTRIBUTING.md](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/CONTRIBUTING.md#git-pre-commit-hooks) for more details.'
-            })

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

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

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

@@ -46,18 +46,30 @@ 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}"
             BRANCH="${PR_HEAD_REF}"
+
+            # Derive variant from all PR labels (default to cpu for frontend-only previews)
+            VARIANT="cpu"
+            echo "${PR_LABELS}" | grep -q '"preview-gpu"' && VARIANT="gpu"
           else
             REF="${GITHUB_SHA}"
             BRANCH="${GITHUB_REF_NAME}"
+            PR_NUMBER=""
+            VARIANT=""
           fi
           payload="$(jq -nc \
             --arg ref "${REF}" \
             --arg branch "${BRANCH}" \
-            '{ref: $ref, branch: $branch}')"
+            --arg pr_number "${PR_NUMBER}" \
+            --arg variant "${VARIANT}" \
+            '{ref: $ref, branch: $branch, pr_number: $pr_number, variant: $variant}')"
           echo "json=${payload}" >> "${GITHUB_OUTPUT}"
 
       - name: Dispatch to cloud repo

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

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

.gitignore

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

.nxignore

@@ -0,0 +1 @@
+.claude/worktrees

.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 (see `.nvmrc` for the required version) and pnpm
   - Git for version control
   - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 
@@ -87,6 +87,10 @@ navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to
 > ⚠️ IMPORTANT:
 > The dev server will NOT load JavaScript extensions from custom nodes. Only core extensions (built into the frontend) will be loaded. This is because the shim system that allows custom node JavaScript to import frontend modules only works in production builds. Python custom nodes still function normally. See [Extension Development Guide](docs/extensions/development.md) for details and workarounds. And See [Extension Overview](docs/extensions/README.md) for extensions overview.
 
+## Troubleshooting
+
+If you run into issues during development (e.g. `pnpm dev` hanging, TypeScript errors after pulling, lock file conflicts), see [TROUBLESHOOTING.md](TROUBLESHOOTING.md) for common fixes.
+
 ## Development Workflow
 
 ### Architecture Decision Records

TROUBLESHOOTING.md

@@ -0,0 +1,368 @@
+# Troubleshooting Guide
+
+This guide helps you resolve common issues when developing ComfyUI Frontend.
+
+## Quick Diagnostic Flowchart
+
+```mermaid
+flowchart TD
+    A[Having Issues?] --> B{What's the problem?}
+    B -->|Dev server stuck| C[nx serve hangs]
+    B -->|Build errors| D[Check build issues]
+    B -->|Lint errors| Q[Check linting issues]
+    B -->|Dependency issues| E[Package problems]
+    B -->|Other| F[See FAQ below]
+
+    Q --> R{oxlint or ESLint?}
+    R -->|oxlint| S[Check .oxlintrc.json<br/>and run pnpm lint:fix]
+    R -->|ESLint| T[Check eslint.config.ts<br/>and run pnpm lint:fix]
+    S --> L
+    T --> L
+
+    C --> G{Tried quick fixes?}
+    G -->|No| H[Run: pnpm i]
+    G -->|Still stuck| I[Run: pnpm clean]
+    I --> J{Still stuck?}
+    J -->|Yes| K[Nuclear option:<br/>pnpm dlx rimraf node_modules<br/>&& pnpm i]
+    J -->|No| L[Fixed!]
+    H --> L
+
+    D --> M[Run: pnpm build]
+    M --> N{Build succeeds?}
+    N -->|No| O[Check error messages<br/>in FAQ]
+    N -->|Yes| L
+
+    E --> H
+
+    F --> P[Search FAQ or<br/>ask in Discord]
+```
+
+## Frequently Asked Questions
+
+### Development Server Issues
+
+#### Q: `pnpm dev` or `nx serve` gets stuck and won't start
+
+**Symptoms:**
+
+- Command hangs on "nx serve"
+- Dev server doesn't respond
+- Terminal appears frozen
+
+**Solutions (try in order):**
+
+1. **First attempt - Reinstall dependencies:**
+
+   ```bash
+   pnpm i
+   ```
+
+2. **Second attempt - Clean build cache:**
+
+   ```bash
+   pnpm clean
+   ```
+
+3. **Last resort - Full node_modules reset:**
+   ```bash
+   pnpm dlx rimraf node_modules && pnpm i
+   ```
+
+**Why this happens:**
+
+- Corrupted dependency cache
+- Outdated lock files after branch switching
+- Incomplete previous installations
+- NX cache corruption
+
+---
+
+#### Q: Port conflicts - "Address already in use"
+
+**Symptoms:**
+
+- Error: `EADDRINUSE` or "port already in use"
+- Dev server fails to start
+
+**Solutions:**
+
+1. **Find and kill the process using the port:**
+
+   ```bash
+   # On Linux/Mac
+   lsof -ti:5173 | xargs kill -9
+
+   # On Windows
+   netstat -ano | findstr :5173
+   taskkill /PID <PID> /F
+   ```
+
+2. **Use a different port** by adding a `port` option to the `server` block in `vite.config.mts`:
+   ```ts
+   server: {
+     port: 3000,
+     // ...existing config
+   }
+   ```
+
+---
+
+### Build and Type Issues
+
+#### Q: TypeScript errors after pulling latest changes
+
+**Symptoms:**
+
+- Type errors in files you didn't modify
+- "Cannot find module" errors
+
+**Solutions:**
+
+1. **Rebuild TypeScript references:**
+
+   ```bash
+   pnpm build
+   ```
+
+2. **Clean and reinstall:**
+
+   ```bash
+   pnpm clean && pnpm i
+   ```
+
+3. **Restart your IDE's TypeScript server**
+   - VS Code: `Cmd/Ctrl + Shift + P` → "TypeScript: Restart TS Server"
+
+---
+
+#### Q: "Workspace not found" or monorepo errors
+
+**Symptoms:**
+
+- pnpm can't find workspace packages
+- Import errors between packages
+
+**Solutions:**
+
+1. **Verify you're in the project root:**
+
+   ```bash
+   pwd  # Should be in ComfyUI_frontend/
+   ```
+
+2. **Rebuild workspace:**
+   ```bash
+   pnpm install
+   pnpm build
+   ```
+
+---
+
+### Linting Issues (oxlint)
+
+#### Q: `eslint-disable` comment isn't suppressing an oxlint rule
+
+**Symptoms:**
+
+- `// eslint-disable-next-line rule-name` has no effect
+- Lint error persists despite the disable comment
+
+**Solution:**
+
+oxlint has its own disable syntax. Use `oxlint-disable` instead:
+
+```ts
+// oxlint-disable-next-line no-console
+console.log('debug')
+```
+
+Check whether the rule is enforced by oxlint (in `.oxlintrc.json`) or ESLint (in `eslint.config.ts`) to pick the right disable comment.
+
+---
+
+#### Q: New lint errors after pulling/upgrading oxlint
+
+**Symptoms:**
+
+- Lint errors in files you didn't change
+- Rules you haven't seen before (e.g. `no-immediate-mutation`, `prefer-optional-chain`)
+
+**Solutions:**
+
+1. **Run the auto-fixer first:**
+
+   ```bash
+   pnpm lint:fix
+   ```
+
+2. **Review changes carefully** — some oxlint auto-fixes can produce incorrect code. Check the diff before committing.
+
+3. **If a rule seems wrong**, check `.oxlintrc.json` to see if it should be disabled or configured differently.
+
+**Why this happens:** oxlint version bumps often enable new rules by default.
+
+---
+
+#### Q: oxlint fails with TypeScript errors
+
+**Symptoms:**
+
+- `pnpm oxlint` or `pnpm lint` fails with type-related errors
+- Errors mention type resolution or missing type information
+
+**Solution:**
+
+oxlint runs with `--type-aware` in this project, which requires valid TypeScript compilation. Fix the TS errors first:
+
+```bash
+pnpm typecheck   # Identify TS errors
+pnpm build       # Or do a full build
+pnpm lint        # Then re-run lint
+```
+
+---
+
+#### Q: Duplicate lint errors from both oxlint and ESLint
+
+**Symptoms:**
+
+- Same violation reported twice
+- Conflicting auto-fix suggestions
+
+**Solution:**
+
+The project uses `eslint-plugin-oxlint` to automatically disable ESLint rules that oxlint already covers (see `eslint.config.ts`). If you see duplicates:
+
+1. Ensure `.oxlintrc.json` is up to date after adding new oxlint rules
+2. Run `pnpm lint` (which runs oxlint then ESLint in sequence) rather than running them individually
+
+---
+
+### Dependency and Package Issues
+
+#### Q: "Package not found" after adding a dependency
+
+**Symptoms:**
+
+- Module not found after `pnpm add`
+- Import errors for newly installed packages
+
+**Solutions:**
+
+1. **Ensure you installed in the correct workspace** (see `pnpm-workspace.yaml` for available workspaces):
+
+   ```bash
+   # Example: install in a specific workspace
+   pnpm --filter <workspace-name> add <package>
+   ```
+
+2. **Clear pnpm cache:**
+   ```bash
+   pnpm store prune
+   pnpm install
+   ```
+
+---
+
+#### Q: Lock file conflicts after merge/rebase
+
+**Symptoms:**
+
+- Git conflicts in `pnpm-lock.yaml`
+- Dependency resolution errors
+
+**Solutions:**
+
+1. **Regenerate lock file:**
+
+   ```bash
+   rm pnpm-lock.yaml
+   pnpm install
+   ```
+
+2. **Or accept upstream lock file:**
+   ```bash
+   git checkout --theirs pnpm-lock.yaml
+   pnpm install
+   ```
+
+---
+
+### Testing Issues
+
+#### Q: Tests fail locally but pass in CI
+
+**Symptoms:**
+
+- Flaky tests
+- Different results between local and CI
+
+**Solutions:**
+
+1. **Run tests in CI mode:**
+
+   ```bash
+   CI=true pnpm test:unit
+   ```
+
+2. **Clear test cache:**
+
+   ```bash
+   pnpm test:unit --no-cache
+   ```
+
+3. **Check Node version matches CI** (see `.nvmrc` for the required version):
+   ```bash
+   node --version
+   nvm use          # If using nvm — reads .nvmrc automatically
+   ```
+
+---
+
+### Git and Branch Issues
+
+#### Q: Changes from another branch appearing in my branch
+
+**Symptoms:**
+
+- Uncommitted changes not related to your work
+- Dirty working directory
+
+**Solutions:**
+
+1. **Stash and reinstall:**
+
+   ```bash
+   git stash
+   pnpm install
+   ```
+
+2. **Check for untracked files:**
+   ```bash
+   git status
+   git clean -fd  # Careful: removes untracked files!
+   ```
+
+---
+
+## Still Having Issues?
+
+1. **Search existing issues:** [GitHub Issues](https://github.com/Comfy-Org/ComfyUI_frontend/issues)
+2. **Ask the community:** [Discord](https://discord.com/invite/comfyorg) (navigate to the `#dev-frontend` channel)
+3. **Create a new issue:** Include:
+   - Your OS and Node version (`node --version`)
+   - Steps to reproduce
+   - Full error message
+   - What you've already tried
+
+## Contributing to This Guide
+
+Found a solution to a common problem? Please:
+
+1. Open a PR to add it to this guide
+2. Follow the FAQ format above
+3. Include the symptoms, solutions, and why it happens
+
+---
+
+**Last Updated:** 2026-03-10

browser_tests/README.md

@@ -27,7 +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).
+Ensure you have the Node.js version specified in `.nvmrc` installed.
 Then, set up the Chromium test driver:
 
 ```bash

browser_tests/assets/nodes/load_image_with_ksampler.json

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

browser_tests/tests/dialog.spec.ts

@@ -328,12 +328,14 @@ test.describe('Settings', () => {
     })
     await newBlankWorkflowRow.click()
 
-    // Click edit button
-    const editKeybindingButton = newBlankWorkflowRow.locator('.pi-pencil')
-    await editKeybindingButton.click()
+    // Click add keybinding button (New Blank Workflow has no default keybinding)
+    const addKeybindingButton = newBlankWorkflowRow.locator(
+      '.icon-\\[lucide--plus\\]'
+    )
+    await addKeybindingButton.click()
 
     // Set new keybinding
-    const input = comfyPage.page.getByPlaceholder('Press keys for new binding')
+    const input = comfyPage.page.getByPlaceholder('Enter your keybind')
     await input.press('Alt+n')
 
     const requestPromise = comfyPage.page.waitForRequest(
@@ -345,7 +347,7 @@ test.describe('Settings', () => {
 
     // Save keybinding
     const saveButton = comfyPage.page
-      .getByLabel('New Blank Workflow')
+      .getByLabel('Modify keybinding')
       .getByText('Save')
     await saveButton.click()
 

browser_tests/tests/groupSelectChildren.spec.ts

@@ -0,0 +1,123 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+
+/**
+ * Returns the client-space position of a group's title bar (for clicking).
+ */
+async function getGroupTitlePosition(
+  comfyPage: ComfyPage,
+  title: string
+): Promise<{ x: number; y: number }> {
+  const pos = await comfyPage.page.evaluate((title) => {
+    const app = window.app!
+    const group = app.graph.groups.find(
+      (g: { title: string }) => g.title === title
+    )
+    if (!group) return null
+    const clientPos = app.canvasPosToClientPos([
+      group.pos[0] + 50,
+      group.pos[1] + 15
+    ])
+    return { x: clientPos[0], y: clientPos[1] }
+  }, title)
+  if (!pos) throw new Error(`Group "${title}" not found`)
+  return pos
+}
+
+/**
+ * Returns {selectedNodeCount, selectedGroupCount, selectedItemCount}
+ * from the canvas in the browser.
+ */
+async function getSelectionCounts(comfyPage: ComfyPage) {
+  return comfyPage.page.evaluate(() => {
+    const canvas = window.app!.canvas
+    let selectedNodeCount = 0
+    let selectedGroupCount = 0
+    for (const item of canvas.selectedItems) {
+      if ('inputs' in item || 'outputs' in item) selectedNodeCount++
+      else selectedGroupCount++
+    }
+    return {
+      selectedNodeCount,
+      selectedGroupCount,
+      selectedItemCount: canvas.selectedItems.size
+    }
+  })
+}
+
+test.describe('Group Select Children', { tag: ['@canvas', '@node'] }, () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.canvasOps.resetView()
+  })
+
+  test('Setting enabled: clicking outer group selects nested group and inner node', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting(
+      'LiteGraph.Group.SelectChildrenOnClick',
+      true
+    )
+    await comfyPage.workflow.loadWorkflow('groups/nested-groups-1-inner-node')
+    await comfyPage.nextFrame()
+
+    const outerPos = await getGroupTitlePosition(comfyPage, 'Outer Group')
+    await comfyPage.canvas.click({ position: outerPos })
+    await comfyPage.nextFrame()
+
+    const counts = await getSelectionCounts(comfyPage)
+    // Outer Group + Inner Group + 1 node = 3 items
+    expect(counts.selectedItemCount).toBe(3)
+    expect(counts.selectedGroupCount).toBe(2)
+    expect(counts.selectedNodeCount).toBe(1)
+  })
+
+  test('Setting disabled: clicking outer group selects only the group', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting(
+      'LiteGraph.Group.SelectChildrenOnClick',
+      false
+    )
+    await comfyPage.workflow.loadWorkflow('groups/nested-groups-1-inner-node')
+    await comfyPage.nextFrame()
+
+    const outerPos = await getGroupTitlePosition(comfyPage, 'Outer Group')
+    await comfyPage.canvas.click({ position: outerPos })
+    await comfyPage.nextFrame()
+
+    const counts = await getSelectionCounts(comfyPage)
+    expect(counts.selectedItemCount).toBe(1)
+    expect(counts.selectedGroupCount).toBe(1)
+    expect(counts.selectedNodeCount).toBe(0)
+  })
+
+  test('Deselecting outer group deselects all children', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting(
+      'LiteGraph.Group.SelectChildrenOnClick',
+      true
+    )
+    await comfyPage.workflow.loadWorkflow('groups/nested-groups-1-inner-node')
+    await comfyPage.nextFrame()
+
+    // Select the outer group (cascades to children)
+    const outerPos = await getGroupTitlePosition(comfyPage, 'Outer Group')
+    await comfyPage.canvas.click({ position: outerPos })
+    await comfyPage.nextFrame()
+
+    let counts = await getSelectionCounts(comfyPage)
+    expect(counts.selectedItemCount).toBe(3)
+
+    // Deselect all via page.evaluate to avoid UI overlay interception
+    await comfyPage.page.evaluate(() => {
+      window.app!.canvas.deselectAll()
+    })
+    await comfyPage.nextFrame()
+
+    counts = await getSelectionCounts(comfyPage)
+    expect(counts.selectedItemCount).toBe(0)
+  })
+})

browser_tests/tests/imagePastePriority.spec.ts

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

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

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

docs/architecture/change-tracker.md

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

eslint.config.ts

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

global.d.ts

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

knip.config.ts

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.42.2",
+  "version": "1.42.4",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

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

@@ -1420,15 +1420,6 @@ audio.comfy-audio.empty-audio-widget {
     font-size 0.1s ease;
 }
 
-/* Performance optimization during canvas interaction */
-.transform-pane--interacting .lg-node * {
-  transition: none !important;
-}
-
-.transform-pane--interacting .lg-node {
-  will-change: transform;
-}
-
 /* ===================== Mask Editor Styles ===================== */
 /* To be migrated to Tailwind later */
 #maskEditor_brush {

src/App.vue

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

src/assets/splash.css

@@ -0,0 +1,51 @@
+/* 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/components/bottomPanel/BottomPanel.vue

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

src/components/builder/useAppSetDefaultView.ts

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

src/components/common/DropdownItem.vue

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

src/components/common/DropdownMenu.vue

@@ -12,6 +12,7 @@ import { computed, toValue } from 'vue'
 import DropdownItem from '@/components/common/DropdownItem.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
+import type { ButtonVariants } from '../ui/button/button.variants'
 
 defineOptions({
   inheritAttrs: false
@@ -23,11 +24,13 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
   to?: string | HTMLElement
   itemClass?: string
   contentClass?: string
+  buttonSize?: ButtonVariants['size']
+  buttonClass?: string
 }>()
 
 const itemClass = computed(() =>
   cn(
-    'm-1 flex cursor-pointer gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
+    'm-1 flex cursor-pointer items-center-safe gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
     itemProp
   )
 )
@@ -44,7 +47,7 @@ const contentClass = computed(() =>
   <DropdownMenuRoot>
     <DropdownMenuTrigger as-child>
       <slot name="button">
-        <Button size="icon">
+        <Button :size="buttonSize ?? 'icon'" :class="buttonClass">
           <i :class="icon ?? 'icon-[lucide--menu]'" />
         </Button>
       </slot>

src/components/common/ScrubableNumberInput.stories.ts

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

src/components/common/ScrubableNumberInput.vue

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

src/components/common/SystemStatsPanel.vue

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

src/components/common/TreeExplorerV2Node.vue

@@ -8,6 +8,7 @@
     <!-- Node -->
     <div
       v-if="item.value.type === 'node'"
+      v-bind="$attrs"
       :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
       :style="rowStyle"
       draggable="true"
@@ -48,6 +49,7 @@
     <!-- Folder -->
     <div
       v-else
+      v-bind="$attrs"
       :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
       :style="rowStyle"
       @click.stop="handleClick($event, handleToggle, handleSelect)"
@@ -98,6 +100,10 @@ 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'
 

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -178,7 +178,7 @@
             v-show="isTemplateVisibleOnDistribution(template)"
             :key="template.name"
             ref="cardRefs"
-            size="compact"
+            size="tall"
             variant="ghost"
             rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
@@ -318,6 +318,20 @@
                       </Button>
                     </div>
                   </div>
+                  <div class="flex">
+                    <span
+                      class="text-neutral flex items-center gap-1.5 text-xs font-bold"
+                    >
+                      <template v-if="isAppTemplate(template)">
+                        <i class="icon-[lucide--panels-top-left]" />
+                        {{ $t('builderToolbar.app', 'App') }}
+                      </template>
+                      <template v-else>
+                        <i class="icon-[lucide--workflow]" />
+                        {{ $t('builderToolbar.nodeGraph', 'Node Graph') }}
+                      </template>
+                    </span>
+                  </div>
                 </div>
               </CardBottom>
             </template>
@@ -483,6 +497,8 @@ const {
 const getEffectiveSourceModule = (template: TemplateInfo) =>
   template.sourceModule || 'default'
 
+const isAppTemplate = (template: TemplateInfo) => template.name.endsWith('.app')
+
 const getBaseThumbnailSrc = (template: TemplateInfo) => {
   const sm = getEffectiveSourceModule(template)
   return getTemplateThumbnailUrl(template, sm, sm === 'default' ? '1' : '')

src/components/dialog/content/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,169 +1,328 @@
 <template>
   <div class="keybinding-panel flex flex-col gap-2">
-    <SearchInput
-      v-model="filters['global'].value"
-      :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
-    />
+    <Teleport defer to="#keybinding-panel-header">
+      <SearchInput
+        v-model="filters['global'].value"
+        class="max-w-96"
+        size="lg"
+        :placeholder="
+          $t('g.searchPlaceholder', { subject: $t('g.keybindings') })
+        "
+      />
+    </Teleport>
 
-    <DataTable
-      v-model:selection="selectedCommandData"
-      :value="commandsData"
-      :global-filter-fields="['id', 'label']"
-      :filters="filters"
-      selection-mode="single"
-      striped-rows
-      :pt="{
-        header: 'px-0'
-      }"
-      @row-dblclick="editKeybinding($event.data)"
-    >
-      <Column field="actions" header="" :pt="{ bodyCell: 'p-1 min-h-8' }">
-        <template #body="slotProps">
-          <div class="actions flex flex-row">
-            <Button
-              variant="textonly"
-              size="icon"
-              :aria-label="$t('g.edit')"
-              @click="editKeybinding(slotProps.data)"
-            >
-              <i class="pi pi-pencil" />
-            </Button>
-            <Button
-              variant="textonly"
-              size="icon"
-              :aria-label="$t('g.reset')"
-              :disabled="
-                !keybindingStore.isCommandKeybindingModified(slotProps.data.id)
-              "
-              @click="resetKeybinding(slotProps.data)"
-            >
-              <i class="pi pi-replay" />
-            </Button>
-            <Button
-              variant="textonly"
-              size="icon"
-              :aria-label="$t('g.delete')"
-              :disabled="!slotProps.data.keybinding"
-              @click="removeKeybinding(slotProps.data)"
-            >
-              <i class="pi pi-trash" />
-            </Button>
-          </div>
-        </template>
-      </Column>
-      <Column
-        field="id"
-        :header="$t('g.command')"
-        sortable
-        class="max-w-64 2xl:max-w-full"
-        :pt="{ bodyCell: 'p-1 min-h-8' }"
-      >
-        <template #body="slotProps">
-          <div class="truncate" :title="slotProps.data.id">
-            {{ slotProps.data.label }}
-          </div>
-        </template>
-      </Column>
-      <Column
-        field="keybinding"
-        :header="$t('g.keybinding')"
-        :pt="{ bodyCell: 'p-1 min-h-8' }"
-      >
-        <template #body="slotProps">
-          <KeyComboDisplay
-            v-if="slotProps.data.keybinding"
-            :key-combo="slotProps.data.keybinding.combo"
-            :is-modified="
-              keybindingStore.isCommandKeybindingModified(slotProps.data.id)
-            "
-          />
-          <span v-else>-</span>
-        </template>
-      </Column>
-      <Column
-        field="source"
-        :header="$t('g.source')"
-        :pt="{ bodyCell: 'p-1 min-h-8' }"
-      >
-        <template #body="slotProps">
-          <span class="overflow-hidden text-ellipsis">{{
-            slotProps.data.source || '-'
-          }}</span>
-        </template>
-      </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"
+    <Teleport defer to="#keybinding-panel-actions">
+      <div class="flex items-center gap-2">
+        <KeybindingPresetToolbar
+          :preset-names="presetNames"
+          @presets-changed="refreshPresetList"
+        />
+        <DropdownMenu
+          :entries="menuEntries"
+          icon="icon-[lucide--ellipsis]"
+          item-class="text-sm gap-2"
+          button-size="unset"
+          button-class="size-10"
         />
-        <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"
+    </Teleport>
+
+    <ContextMenuRoot>
+      <ContextMenuTrigger as-child>
+        <div @contextmenu.capture="clearContextMenuTarget">
+          <DataTable
+            v-model:selection="selectedCommandData"
+            v-model:expanded-rows="expandedRows"
+            :value="commandsData"
+            data-key="id"
+            :global-filter-fields="['id', 'label']"
+            :filters="filters"
+            selection-mode="single"
+            context-menu
+            striped-rows
+            :pt="{
+              header: 'px-0'
+            }"
+            @row-click="handleRowClick($event)"
+            @row-dblclick="handleRowDblClick($event.data)"
+            @row-contextmenu="handleRowContextMenu($event)"
+          >
+            <Column
+              field="id"
+              :header="$t('g.command')"
+              sortable
+              class="max-w-64 2xl:max-w-full"
+              :pt="{ bodyCell: 'p-1 min-h-8' }"
+            >
+              <template #body="slotProps">
+                <div
+                  class="flex items-center gap-1 truncate"
+                  :class="slotProps.data.keybindings.length < 2 && 'pl-5'"
+                  :title="slotProps.data.id"
+                >
+                  <i
+                    v-if="slotProps.data.keybindings.length >= 2"
+                    class="icon-[lucide--chevron-right] size-4 shrink-0 text-muted-foreground transition-transform"
+                    :class="
+                      expandedCommandIds.has(slotProps.data.id) && 'rotate-90'
+                    "
+                  />
+                  <i
+                    v-if="
+                      slotProps.data.keybindings.some(
+                        (b: KeybindingImpl) => b.combo.isBrowserReserved
+                      )
+                    "
+                    v-tooltip="$t('g.browserReservedKeybindingTooltip')"
+                    class="icon-[lucide--triangle-alert] shrink-0 text-warning-background"
+                  />
+                  {{ slotProps.data.label }}
+                </div>
+              </template>
+            </Column>
+            <Column
+              field="keybindings"
+              :header="$t('g.keybinding')"
+              :pt="{ bodyCell: 'p-1 min-h-8' }"
+            >
+              <template #body="slotProps">
+                <div
+                  v-if="slotProps.data.keybindings.length > 0"
+                  class="flex items-center gap-1"
+                >
+                  <template
+                    v-for="(binding, idx) in (
+                      slotProps.data as ICommandData
+                    ).keybindings.slice(0, 2)"
+                    :key="binding.combo.serialize()"
+                  >
+                    <span v-if="idx > 0" class="text-muted-foreground">,</span>
+                    <KeyComboDisplay
+                      :key-combo="binding.combo"
+                      :is-modified="
+                        keybindingStore.isCommandKeybindingModified(
+                          slotProps.data.id
+                        )
+                      "
+                    />
+                  </template>
+                  <span
+                    v-if="slotProps.data.keybindings.length > 2"
+                    class="rounded-sm px-1.5 py-0.5 text-xs text-muted-foreground"
+                  >
+                    {{
+                      $t('g.nMoreKeybindings', {
+                        count: slotProps.data.keybindings.length - 2
+                      })
+                    }}
+                  </span>
+                </div>
+                <span v-else>-</span>
+              </template>
+            </Column>
+            <Column
+              field="source"
+              :header="$t('g.source')"
+              :pt="{ bodyCell: 'p-1 min-h-8' }"
+            >
+              <template #body="slotProps">
+                <span class="overflow-hidden text-ellipsis">{{
+                  slotProps.data.source || '-'
+                }}</span>
+              </template>
+            </Column>
+            <Column field="actions" header="" :pt="{ bodyCell: 'p-1 min-h-8' }">
+              <template #body="slotProps">
+                <div class="actions flex flex-row justify-end">
+                  <Button
+                    v-if="slotProps.data.keybindings.length === 1"
+                    v-tooltip="$t('g.edit')"
+                    variant="textonly"
+                    size="icon"
+                    :aria-label="$t('g.edit')"
+                    @click="
+                      editKeybinding(
+                        slotProps.data,
+                        slotProps.data.keybindings[0]
+                      )
+                    "
+                  >
+                    <i class="icon-[lucide--pencil]" />
+                  </Button>
+                  <Button
+                    v-tooltip="$t('g.addNewKeybinding')"
+                    variant="textonly"
+                    size="icon"
+                    :aria-label="$t('g.addNewKeybinding')"
+                    @click="addKeybinding(slotProps.data)"
+                  >
+                    <i class="icon-[lucide--plus]" />
+                  </Button>
+                  <Button
+                    v-tooltip="$t('g.reset')"
+                    variant="textonly"
+                    size="icon"
+                    :aria-label="$t('g.reset')"
+                    :disabled="
+                      !keybindingStore.isCommandKeybindingModified(
+                        slotProps.data.id
+                      )
+                    "
+                    @click="resetKeybinding(slotProps.data)"
+                  >
+                    <i class="icon-[lucide--rotate-ccw]" />
+                  </Button>
+                  <Button
+                    v-tooltip="$t('g.delete')"
+                    variant="textonly"
+                    size="icon"
+                    :aria-label="$t('g.delete')"
+                    :disabled="slotProps.data.keybindings.length === 0"
+                    @click="handleRemoveKeybindingFromMenu(slotProps.data)"
+                  >
+                    <i class="icon-[lucide--trash-2]" />
+                  </Button>
+                </div>
+              </template>
+            </Column>
+            <template #expansion="slotProps">
+              <div class="pl-4">
+                <div
+                  v-for="(binding, idx) in (slotProps.data as ICommandData)
+                    .keybindings"
+                  :key="binding.combo.serialize()"
+                  class="flex items-center justify-between border-b border-border-subtle py-1.5 last:border-b-0"
+                >
+                  <div class="flex items-center gap-4">
+                    <span class="text-muted-foreground">{{
+                      slotProps.data.label
+                    }}</span>
+                    <KeyComboDisplay
+                      :key-combo="binding.combo"
+                      :is-modified="
+                        keybindingStore.isCommandKeybindingModified(
+                          slotProps.data.id
+                        )
+                      "
+                    />
+                  </div>
+                  <div class="flex flex-row">
+                    <Button
+                      v-tooltip="$t('g.edit')"
+                      variant="textonly"
+                      size="icon"
+                      :aria-label="$t('g.edit')"
+                      @click="editKeybinding(slotProps.data, binding)"
+                    >
+                      <i class="icon-[lucide--pencil]" />
+                    </Button>
+                    <Button
+                      v-tooltip="$t('g.removeKeybinding')"
+                      variant="textonly"
+                      size="icon"
+                      :aria-label="$t('g.removeKeybinding')"
+                      @click="removeSingleKeybinding(slotProps.data, idx)"
+                    >
+                      <i class="icon-[lucide--trash-2]" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </DataTable>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuPortal>
+        <ContextMenuContent
+          class="z-1200 min-w-56 rounded-lg border border-border-subtle bg-base-background px-2 py-3 shadow-interface"
         >
-          <i
-            :class="existingKeybindingOnCombo ? 'pi pi-pencil' : 'pi pi-check'"
-          />
-          {{ existingKeybindingOnCombo ? $t('g.overwrite') : $t('g.save') }}
-        </Button>
-      </template>
-    </Dialog>
+          <ContextMenuItem
+            class="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 text-sm text-text-primary outline-none select-none hover:bg-node-component-surface-hovered focus:bg-node-component-surface-hovered data-disabled:cursor-default data-disabled:opacity-50"
+            :disabled="
+              !contextMenuTarget || contextMenuTarget.keybindings.length === 0
+            "
+            @select="ctxChangeKeybinding"
+          >
+            <i class="icon-[lucide--pencil] size-4" />
+            {{ $t('g.changeKeybinding') }}
+          </ContextMenuItem>
+          <ContextMenuItem
+            class="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 text-sm text-text-primary outline-none select-none hover:bg-node-component-surface-hovered focus:bg-node-component-surface-hovered"
+            @select="ctxAddKeybinding"
+          >
+            <i class="icon-[lucide--plus] size-4" />
+            {{ $t('g.addNewKeybinding') }}
+          </ContextMenuItem>
+          <ContextMenuSeparator class="my-1 h-px bg-border-subtle" />
+          <ContextMenuItem
+            class="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 text-sm text-text-primary outline-none select-none hover:bg-node-component-surface-hovered focus:bg-node-component-surface-hovered data-disabled:cursor-default data-disabled:opacity-50"
+            :disabled="
+              !contextMenuTarget ||
+              !keybindingStore.isCommandKeybindingModified(contextMenuTarget.id)
+            "
+            @select="ctxResetToDefault"
+          >
+            <i class="icon-[lucide--rotate-ccw] size-4" />
+            {{ $t('g.resetToDefault') }}
+          </ContextMenuItem>
+          <ContextMenuItem
+            class="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 text-sm text-text-primary outline-none select-none hover:bg-node-component-surface-hovered focus:bg-node-component-surface-hovered data-disabled:cursor-default data-disabled:opacity-50"
+            :disabled="
+              !contextMenuTarget || contextMenuTarget.keybindings.length === 0
+            "
+            @select="ctxRemoveKeybinding"
+          >
+            <i class="icon-[lucide--trash-2] size-4" />
+            {{ $t('g.removeKeybinding') }}
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenuPortal>
+    </ContextMenuRoot>
+
     <Button
       v-tooltip="$t('g.resetAllKeybindingsTooltip')"
       class="mt-4 w-full"
       variant="destructive-textonly"
       @click="resetAllKeybindings"
     >
-      <i class="pi pi-replay" />
+      <i class="icon-[lucide--rotate-ccw]" />
       {{ $t('g.resetAll') }}
     </Button>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
 import { FilterMatchMode } from '@primevue/core/api'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Message from 'primevue/message'
-import Tag from 'primevue/tag'
 import { useToast } from 'primevue/usetoast'
-import { computed, ref, watchEffect } from 'vue'
+import {
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuPortal,
+  ContextMenuRoot,
+  ContextMenuSeparator,
+  ContextMenuTrigger
+} from 'reka-ui'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import DropdownMenu from '@/components/common/DropdownMenu.vue'
+import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
 import Button from '@/components/ui/button/Button.vue'
-import { KeyComboImpl } from '@/platform/keybindings/keyCombo'
-import { KeybindingImpl } from '@/platform/keybindings/keybinding'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import { useEditKeybindingDialog } from '@/composables/useEditKeybindingDialog'
+import type { KeybindingImpl } from '@/platform/keybindings/keybinding'
 import { useKeybindingService } from '@/platform/keybindings/keybindingService'
 import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
+import { useKeybindingPresetService } from '@/platform/keybindings/presetService'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
+import KeybindingPresetToolbar from './keybinding/KeybindingPresetToolbar.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
 
 const filters = ref({
@@ -172,12 +331,94 @@ const filters = ref({
 
 const keybindingStore = useKeybindingStore()
 const keybindingService = useKeybindingService()
+const presetService = useKeybindingPresetService()
+const settingStore = useSettingStore()
 const commandStore = useCommandStore()
+const dialogStore = useDialogStore()
 const { t } = useI18n()
 
+const presetNames = ref<string[]>([])
+
+async function refreshPresetList() {
+  presetNames.value = (await presetService.listPresets()) ?? []
+}
+
+async function initPresets() {
+  await refreshPresetList()
+  const currentName = settingStore.get('Comfy.Keybinding.CurrentPreset')
+  if (currentName !== 'default') {
+    const preset = await presetService.loadPreset(currentName)
+    if (preset) {
+      keybindingStore.savedPresetData = preset
+      keybindingStore.currentPresetName = currentName
+    } else {
+      await presetService.switchToDefaultPreset()
+    }
+  }
+}
+
+onMounted(() => initPresets())
+
+// "..." menu entries (teleported to header)
+async function saveAsNewPreset() {
+  await presetService.promptAndSaveNewPreset()
+  refreshPresetList()
+}
+
+async function handleDeletePreset() {
+  await presetService.deletePreset(keybindingStore.currentPresetName)
+  refreshPresetList()
+}
+
+async function handleImportPreset() {
+  await presetService.importPreset()
+  refreshPresetList()
+}
+
+const showSaveAsNew = computed(
+  () =>
+    keybindingStore.currentPresetName !== 'default' ||
+    keybindingStore.isCurrentPresetModified
+)
+
+const menuEntries = computed<MenuItem[]>(() => [
+  ...(showSaveAsNew.value
+    ? [
+        {
+          label: t('g.keybindingPresets.saveAsNewPreset'),
+          icon: 'icon-[lucide--save]',
+          command: saveAsNewPreset
+        }
+      ]
+    : []),
+  {
+    label: t('g.keybindingPresets.resetToDefault'),
+    icon: 'icon-[lucide--rotate-cw]',
+    command: () =>
+      presetService.switchPreset('default').then(() => refreshPresetList())
+  },
+  {
+    label: t('g.keybindingPresets.deletePreset'),
+    icon: 'icon-[lucide--trash-2]',
+    disabled: keybindingStore.currentPresetName === 'default',
+    command: handleDeletePreset
+  },
+  {
+    label: t('g.keybindingPresets.importPreset'),
+    icon: 'icon-[lucide--file-input]',
+    command: handleImportPreset
+  },
+  {
+    label: t('g.keybindingPresets.exportPreset'),
+    icon: 'icon-[lucide--file-output]',
+    command: () => presetService.exportPreset()
+  }
+])
+
+// Keybinding table logic
 interface ICommandData {
   id: string
-  keybinding: KeybindingImpl | null
+  keybindings: KeybindingImpl[]
   label: string
   source?: string
 }
@@ -189,99 +430,166 @@ const commandsData = computed<ICommandData[]>(() => {
       `commands.${normalizeI18nKey(command.id)}.label`,
       command.label ?? ''
     ),
-    keybinding: keybindingStore.getKeybindingByCommandId(command.id),
+    keybindings: keybindingStore.getKeybindingsByCommandId(command.id),
     source: command.source
   }))
 })
 
-const selectedCommandData = ref<ICommandData | null>(null)
-const editDialogVisible = ref(false)
-const newBindingKeyCombo = ref<KeyComboImpl | null>(null)
-const currentEditingCommand = ref<ICommandData | null>(null)
-const keybindingInput = ref<InstanceType<typeof InputText> | null>(null)
+const expandedCommandIds = ref<Set<string>>(new Set())
 
-const existingKeybindingOnCombo = computed<KeybindingImpl | null>(() => {
-  if (!currentEditingCommand.value) {
-    return null
+const expandedRows = computed({
+  get() {
+    const result: Record<string, boolean> = {}
+    for (const id of expandedCommandIds.value) {
+      result[id] = true
+    }
+    return result
+  },
+  set(value: Record<string, boolean>) {
+    expandedCommandIds.value = new Set(Object.keys(value))
   }
-
-  // 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) {
-  currentEditingCommand.value = commandData
-  newBindingKeyCombo.value = commandData.keybinding
-    ? commandData.keybinding.combo
-    : null
-  editDialogVisible.value = true
+function toggleExpanded(commandId: string) {
+  if (expandedCommandIds.value.has(commandId)) {
+    expandedCommandIds.value.delete(commandId)
+  } else {
+    expandedCommandIds.value.add(commandId)
+  }
 }
 
-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)
-  }
-})
+watch(filters, () => expandedCommandIds.value.clear(), { deep: true })
 
-async function removeKeybinding(commandData: ICommandData) {
-  if (commandData.keybinding) {
-    keybindingStore.unsetKeybinding(commandData.keybinding)
+const selectedCommandData = ref<ICommandData | null>(null)
+const editKeybindingDialog = useEditKeybindingDialog()
+
+const contextMenuTarget = ref<ICommandData | null>(null)
+
+function editKeybinding(commandData: ICommandData, binding: KeybindingImpl) {
+  editKeybindingDialog.show({
+    commandId: commandData.id,
+    commandLabel: commandData.label,
+    currentCombo: binding.combo,
+    mode: 'edit',
+    existingBinding: binding
+  })
+}
+
+function addKeybinding(commandData: ICommandData) {
+  editKeybindingDialog.show({
+    commandId: commandData.id,
+    commandLabel: commandData.label,
+    currentCombo: null,
+    mode: 'add'
+  })
+}
+
+function handleRowClick(event: { originalEvent: Event; data: ICommandData }) {
+  const target = event.originalEvent.target as HTMLElement
+  if (target.closest('.actions')) return
+  const commandData = event.data
+  if (
+    commandData.keybindings.length >= 2 ||
+    expandedCommandIds.value.has(commandData.id)
+  ) {
+    toggleExpanded(commandData.id)
+  }
+}
+
+function handleRowDblClick(commandData: ICommandData) {
+  if (commandData.keybindings.length === 0) {
+    addKeybinding(commandData)
+  } else if (commandData.keybindings.length === 1) {
+    editKeybinding(commandData, commandData.keybindings[0])
+  }
+}
+
+function handleRowContextMenu(event: {
+  originalEvent: Event
+  data: ICommandData
+}) {
+  contextMenuTarget.value = event.data
+}
+
+function clearContextMenuTarget() {
+  contextMenuTarget.value = null
+}
+
+async function removeSingleKeybinding(
+  commandData: ICommandData,
+  index: number
+) {
+  const binding = commandData.keybindings[index]
+  if (binding) {
+    keybindingStore.unsetKeybinding(binding)
+    if (commandData.keybindings.length <= 2) {
+      expandedCommandIds.value.delete(commandData.id)
+    }
     await keybindingService.persistUserKeybindings()
   }
 }
 
-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
+function handleRemoveAllKeybindings(commandData: ICommandData) {
+  const dialog = showConfirmDialog({
+    headerProps: { title: t('g.removeAllKeybindingsTitle') },
+    props: { promptText: t('g.removeAllKeybindingsMessage') },
+    footerProps: {
+      confirmText: t('g.removeAll'),
+      confirmVariant: 'destructive',
+      onCancel: () => dialogStore.closeDialog(dialog),
+      onConfirm: async () => {
+        keybindingStore.removeAllKeybindingsForCommand(commandData.id)
+        await keybindingService.persistUserKeybindings()
+        dialogStore.closeDialog(dialog)
+      }
+    }
+  })
+}
+
+function handleRemoveKeybindingFromMenu(commandData: ICommandData) {
+  if (commandData.keybindings.length >= 2) {
+    handleRemoveAllKeybindings(commandData)
+  } else {
+    removeSingleKeybinding(commandData, 0)
+  }
+}
+
+function ctxChangeKeybinding() {
+  if (!contextMenuTarget.value) return
+  const target = contextMenuTarget.value
+  if (target.keybindings.length === 1) {
+    editKeybinding(target, target.keybindings[0])
+  } else if (target.keybindings.length >= 2) {
+    if (!expandedCommandIds.value.has(target.id)) {
+      toggleExpanded(target.id)
     }
   }
-  const keyCombo = KeyComboImpl.fromEvent(event)
-  newBindingKeyCombo.value = keyCombo
 }
 
-function cancelEdit() {
-  editDialogVisible.value = false
-  currentEditingCommand.value = null
-  newBindingKeyCombo.value = null
+function ctxAddKeybinding() {
+  if (contextMenuTarget.value) {
+    addKeybinding(contextMenuTarget.value)
+  }
 }
 
-async function saveKeybinding() {
-  const commandId = currentEditingCommand.value?.id
-  const combo = newBindingKeyCombo.value
-  cancelEdit()
-  if (!combo || commandId == undefined) return
+function ctxResetToDefault() {
+  if (contextMenuTarget.value) {
+    resetKeybinding(contextMenuTarget.value)
+  }
+}
 
-  const updated = keybindingStore.updateKeybindingOnCommand(
-    new KeybindingImpl({ commandId, combo })
-  )
-  if (updated) await keybindingService.persistUserKeybindings()
+function ctxRemoveKeybinding() {
+  if (
+    contextMenuTarget.value &&
+    contextMenuTarget.value.keybindings.length > 0
+  ) {
+    handleRemoveKeybindingFromMenu(contextMenuTarget.value)
+  }
 }
 
 async function resetKeybinding(commandData: ICommandData) {
   if (keybindingStore.resetKeybindingForCommand(commandData.id)) {
+    expandedCommandIds.value.delete(commandData.id)
     await keybindingService.persistUserKeybindings()
   } else {
     console.warn(
@@ -291,14 +599,33 @@ async function resetKeybinding(commandData: ICommandData) {
 }
 
 const toast = useToast()
-async function resetAllKeybindings() {
-  keybindingStore.resetAllKeybindings()
-  await keybindingService.persistUserKeybindings()
-  toast.add({
-    severity: 'info',
-    summary: 'Info',
-    detail: 'All keybindings reset',
-    life: 3000
+
+function resetAllKeybindings() {
+  const dialog = showConfirmDialog({
+    headerProps: {
+      title: t('g.resetAllKeybindingsTitle')
+    },
+    props: {
+      promptText: t('g.resetAllKeybindingsMessage')
+    },
+    footerProps: {
+      confirmText: t('g.resetAll'),
+      confirmVariant: 'destructive',
+      onCancel: () => {
+        dialogStore.closeDialog(dialog)
+      },
+      onConfirm: async () => {
+        keybindingStore.resetAllKeybindings()
+        await keybindingService.persistUserKeybindings()
+        dialogStore.closeDialog(dialog)
+        toast.add({
+          severity: 'info',
+          summary: t('g.info'),
+          detail: t('g.allKeybindingsReset'),
+          life: 3000
+        })
+      }
+    }
   })
 }
 </script>

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

@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="flex w-full max-w-[420px] flex-col border-t border-border-default"
+  >
+    <div class="flex flex-col gap-4 p-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('g.keybindingPresets.deletePresetWarning') }}
+      </p>
+      <div class="flex justify-end gap-2">
+        <Button
+          variant="textonly"
+          class="text-muted-foreground"
+          @click="onResult(false)"
+        >
+          {{ $t('g.close') }}
+        </Button>
+        <Button variant="secondary" @click="onResult(true)">
+          {{ $t('g.delete') }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+const { onResult } = defineProps<{
+  onResult: (result: boolean) => void
+}>()
+</script>

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

@@ -0,0 +1,7 @@
+<template>
+  <div class="flex w-full items-center p-4">
+    <p class="m-0 text-sm font-medium">
+      {{ $t('g.keybindingPresets.deletePresetTitle') }}
+    </p>
+  </div>
+</template>

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

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

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

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

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

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

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

@@ -1,7 +1,10 @@
 <template>
   <span>
     <template v-for="(sequence, index) in keySequences" :key="index">
-      <Tag :severity="isModified ? 'info' : 'secondary'">
+      <Tag
+        class="bg-interface-menu-keybind-surface-default text-base-foreground"
+        :severity="isModified ? 'info' : 'secondary'"
+      >
         {{ sequence }}
       </Tag>
       <span v-if="index < keySequences.length - 1" class="px-2">+</span>

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

@@ -0,0 +1,111 @@
+<template>
+  <div class="flex items-center gap-2">
+    <Button v-if="showSaveButton" size="lg" @click="handleSavePreset">
+      {{ $t('g.keybindingPresets.saveChanges') }}
+    </Button>
+    <Select v-model="selectedPreset">
+      <SelectTrigger class="w-64">
+        <SelectValue :placeholder="$t('g.keybindingPresets.default')">
+          {{ displayLabel }}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent class="max-w-64 min-w-0 **:[[role=listbox]]:gap-1">
+        <div class="max-w-60">
+          <SelectItem
+            value="default"
+            class="max-w-60 p-2 data-[state=checked]:bg-transparent"
+          >
+            {{ $t('g.keybindingPresets.default') }}
+          </SelectItem>
+          <SelectItem
+            v-for="name in presetNames"
+            :key="name"
+            :value="name"
+            class="max-w-60 p-2 data-[state=checked]:bg-transparent"
+          >
+            {{ name }}
+          </SelectItem>
+          <hr class="h-px max-w-60 border border-border-default" />
+          <button
+            class="relative flex w-full max-w-60 cursor-pointer items-center justify-between gap-3 rounded-sm border-none bg-transparent p-2 text-sm outline-none select-none hover:bg-secondary-background-hover focus:bg-secondary-background-hover"
+            @click.stop="handleImportFromDropdown"
+          >
+            <span class="truncate">
+              {{ $t('g.keybindingPresets.importKeybindingPreset') }}
+            </span>
+            <i
+              class="icon-[lucide--download] shrink-0 text-base-foreground"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </SelectContent>
+    </Select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+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 { useKeybindingPresetService } from '@/platform/keybindings/presetService'
+import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
+
+const { presetNames } = defineProps<{
+  presetNames: string[]
+}>()
+
+const emit = defineEmits<{
+  'presets-changed': []
+}>()
+
+const { t } = useI18n()
+const keybindingStore = useKeybindingStore()
+const presetService = useKeybindingPresetService()
+
+const selectedPreset = ref(keybindingStore.currentPresetName)
+
+const displayLabel = computed(() => {
+  const name =
+    selectedPreset.value === 'default'
+      ? t('g.keybindingPresets.default')
+      : selectedPreset.value
+  return keybindingStore.isCurrentPresetModified ? `${name} *` : name
+})
+
+watch(selectedPreset, async (newValue) => {
+  if (newValue !== keybindingStore.currentPresetName) {
+    await presetService.switchPreset(newValue)
+    selectedPreset.value = keybindingStore.currentPresetName
+    emit('presets-changed')
+  }
+})
+
+watch(
+  () => keybindingStore.currentPresetName,
+  (name) => {
+    selectedPreset.value = name
+  }
+)
+
+const showSaveButton = computed(
+  () =>
+    keybindingStore.currentPresetName !== 'default' &&
+    keybindingStore.isCurrentPresetModified
+)
+
+async function handleSavePreset() {
+  await presetService.savePreset(keybindingStore.currentPresetName)
+}
+
+async function handleImportFromDropdown() {
+  await presetService.importPreset()
+  emit('presets-changed')
+}
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="flex w-full max-w-[420px] flex-col border-t border-border-default"
+  >
+    <div class="flex flex-col gap-4 p-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('g.keybindingPresets.unsavedChangesMessage') }}
+      </p>
+      <div class="flex justify-end gap-2">
+        <Button
+          variant="textonly"
+          class="text-muted-foreground"
+          @click="onResult(null)"
+        >
+          {{ $t('g.cancel') }}
+        </Button>
+        <Button
+          variant="secondary"
+          class="bg-secondary-background"
+          @click="onResult(false)"
+        >
+          {{ $t('g.keybindingPresets.discardAndSwitch') }}
+        </Button>
+        <Button
+          variant="secondary"
+          class="bg-base-foreground text-base-background"
+          @click="onResult(true)"
+        >
+          {{ $t('g.keybindingPresets.saveAndSwitch') }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+const { onResult } = defineProps<{
+  onResult: (result: boolean | null) => void
+}>()
+</script>

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

@@ -0,0 +1,13 @@
+<template>
+  <div class="flex w-full items-center p-4">
+    <p class="m-0 text-sm font-medium">
+      {{ $t('g.keybindingPresets.unsavedChangesTo', { name: presetName }) }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { presetName } = defineProps<{
+  presetName: string
+}>()
+</script>

src/components/graph/CanvasModeSelector.test.ts

@@ -0,0 +1,153 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import CanvasModeSelector from '@/components/graph/CanvasModeSelector.vue'
+
+const mockExecute = vi.fn()
+const mockGetCommand = vi.fn().mockReturnValue({
+  keybinding: {
+    combo: {
+      getKeySequences: () => ['V']
+    }
+  }
+})
+const mockFormatKeySequence = vi.fn().mockReturnValue('V')
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: mockExecute,
+    getCommand: mockGetCommand,
+    formatKeySequence: mockFormatKeySequence
+  })
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({
+    canvas: { read_only: false }
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      graphCanvasMenu: {
+        select: 'Select',
+        hand: 'Hand',
+        canvasMode: 'Canvas Mode'
+      }
+    }
+  }
+})
+
+const mockPopoverHide = vi.fn()
+
+function createWrapper() {
+  return mount(CanvasModeSelector, {
+    global: {
+      plugins: [i18n],
+      stubs: {
+        Popover: {
+          template: '<div><slot /></div>',
+          methods: {
+            toggle: vi.fn(),
+            hide: mockPopoverHide
+          }
+        }
+      }
+    }
+  })
+}
+
+describe('CanvasModeSelector', () => {
+  it('should render menu with menuitemradio roles and aria-checked', () => {
+    const wrapper = createWrapper()
+
+    const menu = wrapper.find('[role="menu"]')
+    expect(menu.exists()).toBe(true)
+
+    const menuItems = wrapper.findAll('[role="menuitemradio"]')
+    expect(menuItems).toHaveLength(2)
+
+    // Select mode is active (read_only: false), so select is checked
+    expect(menuItems[0].attributes('aria-checked')).toBe('true')
+    expect(menuItems[1].attributes('aria-checked')).toBe('false')
+  })
+
+  it('should render menu items as buttons with aria-labels', () => {
+    const wrapper = createWrapper()
+
+    const menuItems = wrapper.findAll('[role="menuitemradio"]')
+    menuItems.forEach((btn) => {
+      expect(btn.element.tagName).toBe('BUTTON')
+      expect(btn.attributes('type')).toBe('button')
+    })
+    expect(menuItems[0].attributes('aria-label')).toBe('Select')
+    expect(menuItems[1].attributes('aria-label')).toBe('Hand')
+  })
+
+  it('should use roving tabindex based on active mode', () => {
+    const wrapper = createWrapper()
+
+    const menuItems = wrapper.findAll('[role="menuitemradio"]')
+    // Select is active (read_only: false) → tabindex 0
+    expect(menuItems[0].attributes('tabindex')).toBe('0')
+    // Hand is inactive → tabindex -1
+    expect(menuItems[1].attributes('tabindex')).toBe('-1')
+  })
+
+  it('should mark icons as aria-hidden', () => {
+    const wrapper = createWrapper()
+
+    const icons = wrapper.findAll('[role="menuitemradio"] i')
+    icons.forEach((icon) => {
+      expect(icon.attributes('aria-hidden')).toBe('true')
+    })
+  })
+
+  it('should expose trigger button with aria-haspopup and aria-expanded', () => {
+    const wrapper = createWrapper()
+
+    const trigger = wrapper.find('[aria-haspopup="menu"]')
+    expect(trigger.exists()).toBe(true)
+    expect(trigger.attributes('aria-label')).toBe('Canvas Mode')
+    expect(trigger.attributes('aria-expanded')).toBe('false')
+  })
+
+  it('should call focus on next item when ArrowDown is pressed', async () => {
+    const wrapper = createWrapper()
+
+    const menuItems = wrapper.findAll('[role="menuitemradio"]')
+    const secondItemEl = menuItems[1].element as HTMLElement
+    const focusSpy = vi.spyOn(secondItemEl, 'focus')
+
+    await menuItems[0].trigger('keydown', { key: 'ArrowDown' })
+    expect(focusSpy).toHaveBeenCalled()
+  })
+
+  it('should call focus on previous item when ArrowUp is pressed', async () => {
+    const wrapper = createWrapper()
+
+    const menuItems = wrapper.findAll('[role="menuitemradio"]')
+    const firstItemEl = menuItems[0].element as HTMLElement
+    const focusSpy = vi.spyOn(firstItemEl, 'focus')
+
+    await menuItems[1].trigger('keydown', { key: 'ArrowUp' })
+    expect(focusSpy).toHaveBeenCalled()
+  })
+
+  it('should close popover on Escape and restore focus to trigger', async () => {
+    const wrapper = createWrapper()
+
+    const menuItems = wrapper.findAll('[role="menuitemradio"]')
+    const trigger = wrapper.find('[aria-haspopup="menu"]')
+    const triggerEl = trigger.element as HTMLElement
+    const focusSpy = vi.spyOn(triggerEl, 'focus')
+
+    await menuItems[0].trigger('keydown', { key: 'Escape' })
+    expect(mockPopoverHide).toHaveBeenCalled()
+    expect(focusSpy).toHaveBeenCalled()
+  })
+})

src/components/graph/CanvasModeSelector.vue

@@ -4,15 +4,21 @@
     variant="secondary"
     class="group h-8 rounded-none! bg-comfy-menu-bg p-0 transition-none! hover:rounded-lg! hover:bg-interface-button-hover-surface!"
     :style="buttonStyles"
+    :aria-label="$t('graphCanvasMenu.canvasMode')"
+    aria-haspopup="menu"
+    :aria-expanded="isOpen"
     @click="toggle"
   >
     <div class="flex items-center gap-1 pr-0.5">
       <div
         class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
       >
-        <i :class="currentModeIcon" class="block size-4" />
+        <i :class="currentModeIcon" class="block size-4" aria-hidden="true" />
       </div>
-      <i class="icon-[lucide--chevron-down] block size-4 pr-1.5" />
+      <i
+        class="icon-[lucide--chevron-down] block size-4 pr-1.5"
+        aria-hidden="true"
+      />
     </div>
   </Button>
 
@@ -24,31 +30,54 @@
     :close-on-escape="true"
     unstyled
     :pt="popoverPt"
+    @show="onPopoverShow"
+    @hide="onPopoverHide"
   >
-    <div class="flex flex-col gap-1">
-      <div
-        class="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+    <div
+      ref="menuRef"
+      class="flex flex-col gap-1"
+      role="menu"
+      :aria-label="$t('graphCanvasMenu.canvasMode')"
+    >
+      <button
+        type="button"
+        role="menuitemradio"
+        :aria-checked="!isCanvasReadOnly"
+        :tabindex="!isCanvasReadOnly ? 0 : -1"
+        class="flex w-full cursor-pointer items-center justify-between rounded-sm border-none bg-transparent px-3 py-2 text-sm text-text-primary outline-none hover:bg-node-component-surface-hovered focus-visible:bg-node-component-surface-hovered"
+        :aria-label="$t('graphCanvasMenu.select')"
         @click="setMode('select')"
+        @keydown.arrow-down.prevent="focusNextItem"
+        @keydown.arrow-up.prevent="focusPrevItem"
+        @keydown.escape.prevent="closeAndRestoreFocus"
       >
         <div class="flex items-center gap-2">
-          <i class="icon-[lucide--mouse-pointer-2] size-4" />
+          <i class="icon-[lucide--mouse-pointer-2] size-4" aria-hidden="true" />
           <span>{{ $t('graphCanvasMenu.select') }}</span>
         </div>
         <span class="text-[9px] text-text-primary">{{
           unlockCommandText
         }}</span>
-      </div>
+      </button>
 
-      <div
-        class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+      <button
+        type="button"
+        role="menuitemradio"
+        :aria-checked="isCanvasReadOnly"
+        :tabindex="isCanvasReadOnly ? 0 : -1"
+        class="flex w-full cursor-pointer items-center justify-between rounded-sm border-none bg-transparent px-3 py-2 text-sm text-text-primary outline-none hover:bg-node-component-surface-hovered focus-visible:bg-node-component-surface-hovered"
+        :aria-label="$t('graphCanvasMenu.hand')"
         @click="setMode('hand')"
+        @keydown.arrow-down.prevent="focusNextItem"
+        @keydown.arrow-up.prevent="focusPrevItem"
+        @keydown.escape.prevent="closeAndRestoreFocus"
       >
         <div class="flex items-center gap-2">
-          <i class="icon-[lucide--hand] size-4" />
+          <i class="icon-[lucide--hand] size-4" aria-hidden="true" />
           <span>{{ $t('graphCanvasMenu.hand') }}</span>
         </div>
         <span class="text-[9px] text-text-primary">{{ lockCommandText }}</span>
-      </div>
+      </button>
     </div>
   </Popover>
 </template>
@@ -56,7 +85,7 @@
 <script setup lang="ts">
 import Popover from 'primevue/popover'
 import type { ComponentPublicInstance } from 'vue'
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -69,6 +98,8 @@ interface Props {
 defineProps<Props>()
 const buttonRef = ref<ComponentPublicInstance | null>(null)
 const popover = ref<InstanceType<typeof Popover>>()
+const menuRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 
@@ -106,6 +137,43 @@ const setMode = (mode: 'select' | 'hand') => {
   popover.value?.hide()
 }
 
+async function onPopoverShow() {
+  isOpen.value = true
+  await nextTick()
+  const checkedItem = menuRef.value?.querySelector<HTMLElement>(
+    '[aria-checked="true"]'
+  )
+  checkedItem?.focus()
+}
+
+function onPopoverHide() {
+  isOpen.value = false
+}
+
+function closeAndRestoreFocus() {
+  popover.value?.hide()
+  const el = buttonRef.value?.$el || buttonRef.value
+  ;(el as HTMLElement)?.focus()
+}
+
+function focusNextItem(event: KeyboardEvent) {
+  const items = getMenuItems(event)
+  const index = items.indexOf(event.target as HTMLElement)
+  items[(index + 1) % items.length]?.focus()
+}
+
+function focusPrevItem(event: KeyboardEvent) {
+  const items = getMenuItems(event)
+  const index = items.indexOf(event.target as HTMLElement)
+  items[(index - 1 + items.length) % items.length]?.focus()
+}
+
+function getMenuItems(event: KeyboardEvent): HTMLElement[] {
+  const menu = (event.target as HTMLElement).closest('[role="menu"]')
+  if (!menu) return []
+  return Array.from(menu.querySelectorAll('[role="menuitemradio"]'))
+}
+
 const popoverPt = computed(() => ({
   root: {
     class: 'absolute z-50 -translate-y-2'

src/components/graph/GraphCanvas.vue

@@ -81,7 +81,6 @@
           ? 'Execution error'
           : null
       "
-      :zoom-level="canvasStore.canvas?.ds?.scale || 1"
       :data-node-id="nodeData.id"
     />
   </TransformPane>
@@ -364,7 +363,14 @@ watch(
   }
 )
 
-// Update the progress of executing nodes
+/**
+ * Propagates execution progress from the store to LiteGraph node objects
+ * and triggers a canvas redraw.
+ *
+ * No `deep: true` needed — `nodeLocationProgressStates` is a computed that
+ * returns a new `Record` object on every progress event (the underlying
+ * `nodeProgressStates` ref is replaced wholesale by the WebSocket handler).
+ */
 watch(
   () =>
     [executionStore.nodeLocationProgressStates, canvasStore.canvas] as const,
@@ -382,8 +388,7 @@ watch(
 
     // Force canvas redraw to ensure progress updates are visible
     canvas.setDirty(true, false)
-  },
-  { deep: true }
+  }
 )
 
 // Update node slot errors for LiteGraph nodes
@@ -479,50 +484,53 @@ useEventListener(
 onMounted(async () => {
   comfyApp.vueAppReady = true
   workspaceStore.spinner = true
-  // ChangeTracker needs to be initialized before setup, as it will overwrite
-  // some listeners of litegraph canvas.
-  ChangeTracker.init()
+  try {
+    // ChangeTracker needs to be initialized before setup, as it will overwrite
+    // some listeners of litegraph canvas.
+    ChangeTracker.init()
 
-  await until(() => isSettingsReady.value || !!settingsError.value).toBe(true)
+    await until(() => isSettingsReady.value || !!settingsError.value).toBe(true)
 
-  if (settingsError.value) {
-    if (settingsError.value instanceof UnauthorizedError) {
-      localStorage.removeItem('Comfy.userId')
-      localStorage.removeItem('Comfy.userName')
-      window.location.reload()
-      return
+    if (settingsError.value) {
+      if (settingsError.value instanceof UnauthorizedError) {
+        localStorage.removeItem('Comfy.userId')
+        localStorage.removeItem('Comfy.userName')
+        window.location.reload()
+        return
+      }
+      throw settingsError.value
     }
-    throw settingsError.value
+
+    // Register core settings immediately after settings are ready
+    CORE_SETTINGS.forEach(settingStore.addSetting)
+
+    await Promise.all([
+      until(() => isI18nReady.value || !!i18nError.value).toBe(true),
+      useNewUserService().initializeIfNewUser()
+    ])
+    if (i18nError.value) {
+      console.warn(
+        '[GraphCanvas] Failed to load custom nodes i18n:',
+        i18nError.value
+      )
+    }
+
+    // @ts-expect-error fixme ts strict error
+    await comfyApp.setup(canvasRef.value)
+    canvasStore.canvas = comfyApp.canvas
+    canvasStore.canvas.render_canvas_border = false
+    useSearchBoxStore().setPopoverRef(nodeSearchboxPopoverRef.value)
+
+    window.app = comfyApp
+    window.graph = comfyApp.graph
+
+    comfyAppReady.value = true
+
+    vueNodeLifecycle.setupEmptyGraphListener()
+  } finally {
+    workspaceStore.spinner = false
   }
 
-  // Register core settings immediately after settings are ready
-  CORE_SETTINGS.forEach(settingStore.addSetting)
-
-  await Promise.all([
-    until(() => isI18nReady.value || !!i18nError.value).toBe(true),
-    useNewUserService().initializeIfNewUser()
-  ])
-  if (i18nError.value) {
-    console.warn(
-      '[GraphCanvas] Failed to load custom nodes i18n:',
-      i18nError.value
-    )
-  }
-
-  // @ts-expect-error fixme ts strict error
-  await comfyApp.setup(canvasRef.value)
-  canvasStore.canvas = comfyApp.canvas
-  canvasStore.canvas.render_canvas_border = false
-  workspaceStore.spinner = false
-  useSearchBoxStore().setPopoverRef(nodeSearchboxPopoverRef.value)
-
-  window.app = comfyApp
-  window.graph = comfyApp.graph
-
-  comfyAppReady.value = true
-
-  vueNodeLifecycle.setupEmptyGraphListener()
-
   comfyApp.canvas.onSelectionChange = useChainCallback(
     comfyApp.canvas.onSelectionChange,
     () => canvasStore.updateSelectedItems()
@@ -535,7 +543,7 @@ onMounted(async () => {
 
   // Restore saved workflow and workflow tabs state
   await workflowPersistence.initializeWorkflow()
-  workflowPersistence.restoreWorkflowTabsState()
+  await workflowPersistence.restoreWorkflowTabsState()
 
   const sharedWorkflowLoadStatus =
     await workflowPersistence.loadSharedWorkflowFromUrlIfPresent()

src/components/graph/GraphCanvasMenu.vue

@@ -10,6 +10,8 @@
     ></div>
 
     <ButtonGroup
+      role="toolbar"
+      :aria-label="t('graphCanvasMenu.canvasToolbar')"
       class="absolute right-0 bottom-0 z-1200 flex-row gap-1 border border-interface-stroke bg-comfy-menu-bg p-2"
       :style="{
         ...stringifiedMinimapStyles.buttonGroupStyles
@@ -30,7 +32,7 @@
         class="size-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
-        <i class="icon-[lucide--focus] size-4" />
+        <i class="icon-[lucide--focus] size-4" aria-hidden="true" />
       </Button>
 
       <Button
@@ -44,7 +46,7 @@
       >
         <span class="inline-flex items-center gap-1 px-2 text-xs">
           <span>{{ canvasStore.appScalePercentage }}%</span>
-          <i class="icon-[lucide--chevron-down] size-4" />
+          <i class="icon-[lucide--chevron-down] size-4" aria-hidden="true" />
         </span>
       </Button>
 
@@ -59,7 +61,7 @@
         :class="minimapButtonClass"
         @click="onMinimapToggleClick"
       >
-        <i class="icon-[lucide--map] size-4" />
+        <i class="icon-[lucide--map] size-4" aria-hidden="true" />
       </Button>
 
       <Button
@@ -78,7 +80,7 @@
         :style="stringifiedMinimapStyles.buttonStyles"
         @click="onLinkVisibilityToggleClick"
       >
-        <i class="icon-[lucide--route-off] size-4" />
+        <i class="icon-[lucide--route-off] size-4" aria-hidden="true" />
       </Button>
     </ButtonGroup>
   </div>

src/components/honeyToast/HoneyToast.vue

@@ -26,15 +26,18 @@ function toggle() {
         v-if="visible"
         role="status"
         aria-live="polite"
-        class="fixed inset-x-4 bottom-6 z-9999 mx-auto w-auto max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg transition-all duration-300 sm:inset-x-0 sm:w-min sm:min-w-0"
+        :class="
+          cn(
+            'fixed inset-x-4 bottom-6 z-9999 mx-auto w-auto max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg transition-all duration-300 sm:inset-x-0',
+            isExpanded ? 'sm:w-[max(400px,40vw)]' : 'sm:w-fit'
+          )
+        "
       >
         <div
           :class="
             cn(
               'max-w-full min-w-0 overflow-hidden transition-all duration-300',
-              isExpanded
-                ? 'max-h-100 w-full sm:w-[max(400px,40vw)]'
-                : 'max-h-0 w-0'
+              isExpanded ? 'max-h-100 w-full' : 'max-h-0 w-0'
             )
           "
         >

src/components/input/MultiSelect.stories.ts

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

src/components/input/MultiSelect.vue

@@ -16,20 +16,23 @@
     :pt="{
       root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
-          'relative inline-flex h-10 cursor-pointer select-none',
+          'relative inline-flex cursor-pointer select-none',
+          size === 'md' ? 'h-8' : 'h-10',
           'rounded-lg bg-secondary-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
+          'hover:bg-secondary-background-hover',
           'border-[2.5px] border-solid',
-          selectedCount > 0
-            ? 'border-node-component-border'
-            : 'border-transparent',
-          'focus-within:border-node-component-border',
-          { 'cursor-default opacity-60': props.disabled }
+          selectedCount > 0 ? 'border-base-foreground' : 'border-transparent',
+          'focus-within:border-base-foreground',
+          props.disabled &&
+            'cursor-default opacity-30 hover:bg-secondary-background'
         )
       }),
       labelContainer: {
-        class:
-          'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 '
+        class: cn(
+          'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
+          size === 'md' ? 'pl-3' : 'pl-4'
+        )
       },
       label: {
         class: 'p-0'
@@ -129,12 +132,12 @@
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span class="text-sm">
+      <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
         {{ label }}
       </span>
       <span
         v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
       >
         {{ selectedCount }}
       </span>
@@ -197,6 +200,8 @@ defineOptions({
 interface Props {
   /** Input label shown on the trigger button */
   label?: string
+  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
+  size?: 'lg' | 'md'
   /** Show search box in the panel header */
   showSearchBox?: boolean
   /** Show selected count text in the panel header */
@@ -216,6 +221,7 @@ interface Props {
 }
 const {
   label,
+  size = 'lg',
   showSearchBox = false,
   showSelectedCount = false,
   showClearButton = false,

src/components/input/SelectDropdown.stories.ts

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

src/components/input/SingleSelect.stories.ts

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